Soru CSS kullanarak nasıl bir metin veya görüntüyü şeffaf bir arka plana veririm?


Bunu yapmak sadece CSS kullanarak mümkün mü background bir öğenin yarı saydam olduğu ancak öğenin opak içeriği (metni ve resimleri) var mı?

Metni ve arka planı iki ayrı eleman olarak kullanmadan bunu başarmak isterim.

Denerken:

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
<p>
  <span>Hello world</span>
</p>

Çocuk elemanları ebeveynlerinin opaklığına maruz kalıyor gibi görünüyor. opacity:1 göreceli opacity:0.6 ebeveynin


1998
2018-04-30 09:00


Menşei


Ne yazık ki, CSS3 bunu yeni renk modülüyle sabitlemeyi hedefliyor, bir renk belirttiğinizde bir alfa değeri belirtmenize izin veriyordu. w3.org/TR/css3-color - meandmycode
Aslında, çocuk unsurların opaklığı çarpılır üst öğenin opaklığı tarafından geçersiz kılınır. Yani örneğin popaklık vardı .6 ve spanopaklık vardı .5 o zaman metnin gerçek opaklığı açıklıktaki 0.3. - chharvey
Tahmin et, ama yarı saydam arka plan olduğu için, filtre / opaklığa bile ihtiyacınız yok: codepen.io/anon/pen/ksJug - Stijn Sanders
@chharvey Tanımlarsam ne olur? opacity:.5 ebeveyn için ve opacity:2 alt öğe için? - Alexander
@Alexander, bu soruyu sorduğuna sevindim. Matematiksel olarak, biri çocuğun 1 opaklığına geri döneceğinden şüphelenirdi. opacity:2;olduğu geçersiz CSS. Değeri opacity özellik şart kapsayıcı aralık dahilinde olmak [0,1]. - chharvey


Cevaplar:


Yarı saydam kullanın PNG görüntü veya CSS3 kullanın:

background-color:rgba(255,0,0,0.5);

İşte css3.info'dan bir makale, Opaklık, RGBA ve uzlaşma (2007-06-03).


2115
2017-07-13 20:51



Bunu hex renkleriyle yapmak mümkün mü? #Fff gibi? - grm
@grm javascripter.net/faq/hextorgb.htm - kb.
@grm: W3C bir #RRGGBBAA hex kodu formatı getirmeyi düşündü, ancak (çeşitli nedenlerle) karar vermediler, bu yüzden yapamayız. - outis
@grm ile SUKDÖ'nün Yapabilirsin, background-color: rgba(#000, .5); - Jürgen Paul
@outis: İyi haber, #RRGGBBAA şimdi Renk 4 düzeyinde. - BoltClock♦


Firefox 3 ve Safari 3'te RGBA'yı kullanabilirsiniz. Georg Schölly bahsetti.

Bilinen bir numara, degrade filtresini kullanarak Internet Explorer'da da kullanabilmenizdir.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

İlk hex sayısı, rengin alfa değerini tanımlar.

Tam çözüm tüm tarayıcılar:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0) transparent;
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Bu RGBa ve filtreler aracılığıyla alt öğeleri etkilemeden CSS arka plan saydamlığı.

Ekran görüntüleri sonuç kanıtı:

Aşağıdaki kodu kullanırken budur:            

 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <title>An XHTML 1.0 Strict standard template</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css" media="all">
         .transparent-background-with-text-and-images-on-top {
             background: rgb(0, 0, 0) transparent;   /* Fallback for web browsers that doesn't support RGBa */
            background: rgba(0, 0, 0, 0.6);   /* RGBa with 0.6 opacity */
             filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);  /* For IE 5.5 - 7*/
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";  /* For IE 8*/
         }
     </style>
 </head>

 <body>
     <div class="transparent-background-with-text-and-images-on-top">
         <p>Here some content (text AND images) "on top of the transparent background"</p>
        <img src="http://i.imgur.com/LnnghmF.gif">
     </div>
 </body>
 </html>

Chrome-33 IE11 IE9 IE8


456
2018-04-30 20:42



Bu IE6 ve IE7 hem de harika çalışıyor gibi görünüyor ... teşekkürler! - philfreo
Ama IE8'de değil. Yeni -ms filtre sözdizimini denedim ama hala benim için çalışmadı :( - philfreo
Bu yazı IE8'de nasıl yapılacağını gösterir:robertnyman.com/2010/01/11/... - Slapout
@philfreo: Eğer Sebastian'ın kodunun ilk bitini "background: rgb (0, 0, 0) transparent" olarak değiştirirseniz; Şimdi IE8'de çalışmalı. Bu beni oldukça uzun zamandır rahatsız ediyor! - Tom Chantler
@AdrienBe - Cevabınızı talimatlarınıza göre düzenledim. Maalesef bu belirli Soru ve Cevapların belirli bir zaman diliminde yer almam, bu nedenle bu konuşmayı şu anda ekleyemem. - user664833


Bu, CSS 3 kullanarak değil, en iyi çözüm olabilir. Ve görebildiğim kadarıyla Firefox, Chrome ve Internet Explorer'da harika çalışıyor.

Bir kapsayıcı DIV ve iki çocuk DIV'u aynı düzeyde, biri içerik için, arka plan için bir tane koyun. Ve CSS kullanarak, içeriğe sığacak şekilde arka planı otomatik olarak boyutlandırın ve arka planı aslında z-endeksini kullanarak arkaya yerleştirin.

    .container {
      position: relative;
    }
    .content {
      position: relative;
      color: White;
      z-index: 5;
    }
    .background {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      background-color: Black;
      z-index: 1;
      /* These three lines are for transparency in all browsers. */
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: .5;
    }
<div class="container">
  <div class="content">
    Here is the content.
    <br />Background should grow to fit.
  </div>
  <div class="background"></div>
</div>


97
2018-05-24 16:07



“Metni ve arka planı birbirinin üzerine yerleştirilmiş iki öğede ayırmadan” dedi. Yine de teşekkürler, bu iyi bir çözümdür ve yararlıdır, ancak bazı durumlarda opak elemanın yarı şeffaf olan bir çocuk olmasını istersiniz. - Rolf
Bir başka SO soruda hemen hemen aynı şekilde cevap verdim ama bir jsfiddle & ekran görüntüsü kanıtı (IE7 +) ekledim, ilgilenirseniz buraya bakın stackoverflow.com/a/21984546/759452 - Adrien Be
@Gorkem Pacaci: Saydamlık özelliklerinin "gerçekten" çapraz tarayıcı olduğundan emin olun, bu kod snippet'ini CSSTRICKS'ten kullanabilirsiniz. css-tricks.com/snippets/css/cross-browser-opacity - Adrien Be
Neden bu gibi sahte bir eleman ile yapmayın :after ve ekstra işaretlemeden kaçının mı? - AndFisher


Yarı saydam kullanmak daha iyidir .png.

Sadece aç Photoshop, oluşturmak 2x2 piksel görüntüsü (toplama 1x1 Internet Explorer hata neden olabilir!), yeşil bir renkle doldurun ve opaslığı "Katmanlar sekmesinde"% 60 olarak ayarlayın. Ardından kaydedin ve arka plan görüntüsü yapın:

<p style="background: url(green.png);">any text</p>

Tabii ki, güzel dışında harika çalışıyor Internet Explorer 6. Daha iyi düzeltmeler var, ancak burada hızlı bir kesmek var:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}

54
2017-10-05 08:15



Kullanabilirsiniz paint.net Ayrıca. - Donny V.


Basit bir yarı saydam arka plan rengi için, yukarıdaki çözümler (CSS3 veya bg görüntüleri) en iyi seçeneklerdir. Ancak, meraklı bir şeyler yapmak (ör. Animasyon, çoklu arka planlar, vb.) Yapmak veya CSS3'e güvenmek istemiyorsanız, “bölme tekniği” ni deneyebilirsiniz:

.pane, .pane > .back, .pane > .cont { display: block; }

.pane {
    position: relative;
}

.pane > .back {
    position: absolute;
    width: 100%; height: 100%;
    top: auto; bottom: auto; left: auto; right: auto;
}

.pane > .cont {
    position: relative;
    z-index: 10;
}
<p class="pane">
    <span class="back" style="background-color: green; opacity: 0.6;"></span>
    <span class="cont" style="color: white;">Hello world</span>
</p>

Teknik, dış bölme elemanının içinde iki “katman” kullanarak çalışır:

  • İçeriğin akışını etkilemeden bölme elemanının boyutuna uyan bir (“geri”)
  • İçeriği içeren ve bölmenin boyutunu belirlemeye yardımcı olan bir (“devam”).

position: relative bölmede önemlidir; tabakanın bölmenin boyuna sığmasını söyler. (Eğer ihtiyacınız varsa <p> Mutlak olmak için etiketi, bölmeyi bir <p> bir <span> ve hepsini tamamen pozisyonda sar <p> etiket.)

Bu tekniğin, yukarıda sıralananlar üzerinde ana avantajı, bölmenin belirli bir boyutta olması gerekmemesidir; Yukarıda kodlandığı gibi, tam genişliğe (normal blok öğesi düzeni) ve yalnızca içerik kadar yüksek olacaktır. Dış bölme elemanı, dikdörtgen olduğu sürece, herhangi bir şekilde boyutlandırılabilir (yani satır içi blok çalışır; düz eski satır içi olmaz).

Ayrıca, size arka plan için çok fazla özgürlük verir; arka öğeye gerçekten bir şey koymakta özgürsünüz ve içeriğin akışını etkilemediğinden (birden çok tam boyutlu alt katmana sahip olmak istiyorsanız, bunların aynı zamanda konumlarına da sahip olduğundan emin olun: mutlak, genişlik / yükseklik:% 100, ve üst / alt / sol / sağ: otomatik).

Arka plan gömme ayarına izin veren bir değişiklik (üst / alt / sol / sağ) ve / veya arka plan sabitleme (sol / sağ veya üst / alt çiftlerden birini kaldırarak) aşağıdaki CSS'yi kullanmaktır:

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

Yazılı olarak, bu Firefox, Safari, Chrome, IE8 + ve Opera'da çalışır, ancak IE7 ve IE6 ekstra CSS ve ifadeler gerektirir, IIRC ve son kontrol ettiğim zaman, ikinci CSS değişimi Opera'da çalışmaz.

Dikkat edilmesi gerekenler:

  • Devam eden katmanın içindeki yüzer elemanlar içerilmeyecektir. Temizlendiklerinden ya da başka bir şekilde bulunduklarından emin olmanız ya da alt kısımdan kalacağından emin olmanız gerekir.
  • Kenar boşlukları bölme elemanına gider ve dolgu elemanı devam elemanına gider. Aksini kullanmayın (kontra üzerindeki boşluklar veya bölme üzerindeki boşluklar) veya sayfa her zaman tarayıcı penceresinden biraz daha geniş olacak gibi tuhaflıklar keşfedersiniz.
  • Bahsedildiği gibi, her şeyin blok veya satır içi blok olması gerekir. Kullanmaktan çekinmeyin <div>yerine <span>CSS'nizi basitleştirmek için

Bu tekniğin esnekliğini gösteren bir demo, onu kullanarak tandem display: inline-blockve ikisi de auto & özel widths /min-heights:

.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
	position: relative;
	width: 175px; min-height: 100px;
	margin: 8px;
}

.pane > .back {
	position: absolute; z-index: 1;
	width: auto; height: auto;
	top: 8px; bottom: 8px; left: 8px; right: 8px;
}

.pane > .cont {
	position: relative; z-index: 10;
}

.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
	<span class="back debug_green"></span>
	<span class="cont debug_red">
		Pane content.<br/>
		Pane content.
	</span>
</p>

Ve işte bir canlı demo yaygın olarak kullanılan tekniğin:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



Hangi durumda CSS3'ü bunun için kullanmak istemez? - Burkely91
@ Burkely91 CSS3'te yapabiliyorsanız, bunu kesinlikle kullanın. Ancak CSS3 arka planı, tüm içerik türlerini ve tam düzen esnekliğini desteklemez. Yukarıdaki zarf / harf örneği, bağımsız olarak tekrar eden kenarlar ve orta dolgu (lar) nedeniyle CSS3 ile çekilmesi zor olacaktır. Ayrıca, CSS3 desteğinin yaygınlaşmasından önce bu cevabın 5 yıl önce orijinal olarak yazıldığını unutmayın. - Slipp D. Thompson
@ Ivan Ivancha Değişikliklerinizi geri aldınız. Üzgünüm, tercih ettiğim formdan (sekmelerden) girintiyi (2 boşluk) sizin için değiştirmiyorum. Günlük kod projelerinizde 2-alanlı girintiyi kullanmak için iyi bir nedeniniz olabilir, ancak web'de sunum için sekmelerin net kazanca sahip olduğuna inanıyorum - daha derin girinti, hiyerarşinin seviyelerini daha kolay ayırt etmenizi sağlar ve çok uzak Sekmeleri alanlara güvenilir bir şekilde dönüştürmek daha kolaydır ve böylece tüm okuyucuların daha uyumlu bir şeklidir. - Slipp D. Thompson
@Igor Ivancha Ayrıca, her CSS seçiciyi ve özelliği kendi satırına koyan bir güzelleştirici olsa da kodu çalıştırdığınız anlaşılıyor. Örneklerim okuyucu tarafından birlikte anlaşılması gereken parçaları mantıksal olarak gruplandırmak için kasıtlı satır sonları ve boşluklarla yazılmıştır. çoğu width:& height: özellikler bir çizgiyi paylaşır çünkü aynı tür yapılardır ve 2 boyutlu bir şekil olarak değil, bir çift boyutlu kısıtlar olarak daha iyi anlaşılırlar. Dahası, bazı satırlarda, onlara gösterilmesi gereken önemli bir şey olmadığı için tekrarlanan adil bir miktar var. - Slipp D. Thompson
@Igor Ivancha Mantıksal organizasyon, gruplandırma ve stil oluşturma, her türlü yazıda olduğu gibi, aklı başında yazı yazabilir, anlaşılabilir bir kod yazmak için çok önemlidir. Yaptığınız değişiklikler, herhangi bir gönderiye girme ve tüm paragraf sonlarını kaldırmanın ve her bir cümleden sonra zorunlu bir yeni satır koymanın eşdeğeriydi. Kendi işinde bu kadar akıl almaz bir şey olmak istiyorsan, bunu yapmakta özgürsün. Ama lütfen diğer insanların çalışmalarındaki anlamsal karakteri ve ifadeyi aldatmayın. - Slipp D. Thompson


İşaretlemeyi en aza indirmek için bir numara var: yalancı öge arka plan olarak ve ana unsuru ve onun çocuklarını etkilemeden opaklığı ona ayarlayabilirsiniz:

DEMO

Çıktı:

Background opacity with a pseudo element

İlgili kod:

p {
  position: relative;
}
p:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: .6;
  z-index: -1;
}
/*** The following is just for demo styles  ***/

body {
  background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
  background-size: cover;
}
p {
  width: 50%;
  padding: 1em;
  margin: 10% auto;
  font-family: arial, serif;
  color: #000;
}
img {
  display: block;
  max-width: 90%;
  margin: .6em auto;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
  <img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>

Tarayıcı desteği Internet Explorer 8 ve sonra.


47
2018-01-14 00:14





En kolay yöntem yarı saydam bir arka plan kullanmaktır. PNG resmi.

Çalışmak için JavaScript'i kullanabilirsiniz. Internet Explorer 6 eğer ihtiyacın varsa.

Ana hatlarıyla belirtilen yöntemi kullanıyorum Internet Explorer 6'da şeffaf PNG'ler.

Ondan başka,

kullanarak sahte yapabilirsin two side-by-side sibling elements - Yapmak yarı saydam, sonra absolutely position the other over the top?


23
2018-04-30 09:14



Tek ihtiyacım olan basit bir arka plan rengidir, bu renkle PNG'nin hangi boyutta oluşturduğumu önerirsiniz? 1x1 işleme çok fazla iş yapar, çok fazla piksel bu PNG'yi oldukça büyük yapar (sıkıştırıldığından beri tamam dosya boyutunda olmalı, ancak yine de bunu kullanmak için sıkıştırmayı açmanız gerekir) ... - Stijn Sanders
1x1'den daha fazla tekrarlanırken daha az bellek kullanan ve hala bant genişliği kullanımını en aza indirecek kadar küçük olan 30px x 30px gibi bir şey öneririm. - Chris


Bu yöntem, arka planda bir görüntüye sahip olmanıza ve yalnızca düz bir renge sahip olmanıza izin verir ve sınırlar gibi diğer özelliklerde saydamlık sağlamak için kullanılabilir. Saydam PNG görüntüleri gerekmez.

kullanım :before (veya :after) CSS'de ve öğeyi orijinal opaklığında bırakmak için opaklık değerini verin. Böylece, şunları yapabilirsiniz: bir faux öğesi yapmadan önce bunu istediğiniz şeffaf arkaplana (veya kenarlık) verin ve opak tutmak istediğiniz içeriğin arkasına taşıyın. z-index.

Bir örnek (keman) (unutmayın ki DIV sınıfla dad renklere biraz bağlam ve kontrast sağlamak için, bu ekstra eleman aslında gerekli değildir ve kırmızı dikdörtgen biraz arkaya doğru hareket ettirmek için sağa ve aşağı doğru hareket ettirilir fancyBgöğesi):

<div class="dad">
    <div class="fancyBg">
        Test text that should have solid text color lets see if we can manage it without extra elements
    </div>
</div>

bu CSS ile:

.dad {
    background: lime; border: 1px double black; margin: 1ex 2ex;
    padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
    border: 1px dashed black; position: relative; color: white; font-weight: bold;
    z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
    position: absolute; background: red; opacity: .5;
    top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
    /*top: 0; right: 0; bottom: 0; left: 0;*/
    z-index: -1;
}

Bu durumda .fancyBg:before Saydamlık ile sahip olmak istediğiniz CSS özelliklerine sahiptir (bu örnekte kırmızı arka plan ancak görüntü veya kenarlıklar olabilir). Arkasında taşımak için mutlak olarak konumlandırılmış .fancyBg (Sıfırın değerini kullanın veya ihtiyaçlarınız için daha uygun olanı).


20
2018-01-26 16:36





Sorun şu ki, bu metin aslında örneğinizde tam opaklığa sahiptir. İçinde tam opaklık var p etiket, ancak p etiketi sadece yarı saydamdır.

CSS'de gerçekleştirmek yerine yarı saydam bir PNG arka plan görüntüsü ekleyebilir veya metin ve div öğesini 2 öğeye ayırabilir ve metni kutu üzerinde hareket ettirebilirsiniz (örneğin, negatif kenar boşluğu).

Aksi takdirde mümkün olmaz.

DÜZENLE:

Tıpkı Chris'in de bahsettiği gibi: eğer şeffaflığı olan bir PNG dosyası kullanırsanız, sinir bozucu Internet Explorer'da çalışması için bir JavaScript çözümü kullanmalısınız.


14
2017-10-25 13:55





Hemen hemen tüm bu cevaplar, tasarımcının düz bir renk arkaplanı istediğini varsayar. Tasarımcı aslında bir fotoğrafı arka plan olarak istiyorsa şu andaki tek gerçek çözüm jQuery Transify eklentisi gibi bir JavaScript'dir başka yerlerde belirtilmiş.

Yapmamız gereken şey, CSS çalışma grubu tartışmasına katılmak ve bize bir arka plan opaklığı özelliği kazandırmaktır! Çoklu arkaplan özelliği ile el ele çalışmalıdır.


14
2018-04-30 09:13





İşte bunu nasıl yapıyorum (optimal olmayabilir, ama işe yarıyor):

Oluştur div yarı saydam olmak istediğiniz. Bir sınıf / kimlik verin. BOŞ bırakın ve kapatın. Ayarlanmış bir yükseklik ve genişlik (300 piksele 300 piksel) verin. 0,5'lik bir opaklık veya istediğiniz gibi ve arka plan rengini verin.

Daha sonra, DIRECTLY divew, farklı bir sınıf / kimliğe sahip başka bir div oluşturun. Metninizi yerleştireceğiniz bir paragraf oluşturun. Ver div konum: göreli ve üst: -295px (bu NEGATİF 295 pikseldir). İyi bir ölçüm için 2'lik bir z-endeksi verin ve opaklığının 1 olduğundan emin olun. Paragrafınızı istediğiniz gibi biçimlendirin, ancak boyutların ilkinden daha az olduğundan emin olun. div bu yüzden taşmaz.

Bu kadar. İşte kod:

.trans {
  opacity: 0.5;
  height: 300px;
  width: 300px;
  background-color: orange;
}
.trans2 {
  opacity: 1;
  position: relative;
  top: -295px;
}
.trans2 p {
  width: 295px;
  color: black;
  font-weight: bold;
}
<body>
  <div class="trans">
  </div>
  <div class="trans2">
    <p>
      text text text
    </p>
  </div>
</body>

Bu Safari 2.x'te çalışır, Internet Explorer hakkında bilmiyorum.


13
2018-04-30 09:52



Ekstra eleman önlenebilir ve bunun yerine, :before veya :after - frozenkoi