ฉันจะให้พื้นหลังโปร่งใสของข้อความหรือรูปภาพโดยใช้ CSS ได้อย่างไร

2283

เป็นไปได้หรือไม่ที่ใช้ CSS เท่านั้นเพื่อสร้างbackgroundองค์ประกอบแบบกึ่งโปร่งใส แต่มีเนื้อหา (ข้อความและรูปภาพ) ขององค์ประกอบทึบแสง?

ฉันต้องการทำสิ่งนี้ให้สำเร็จโดยไม่ต้องมีข้อความและพื้นหลังเป็นองค์ประกอบสองอย่างแยกกัน

เมื่อพยายาม:

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>

ขยายตัวอย่างข้อมูล

ดูเหมือนว่าองค์ประกอบของเด็กขึ้นอยู่กับความทึบของผู้ปกครองดังนั้นจึงopacity:1สัมพันธ์กับองค์ประกอบopacity:0.6ของผู้ปกครอง

html css opacity

— Stijn Sanders
แหล่งที่มา

16

น่าเสียดายที่ CSS3 กำลังกำหนดเป้าหมายการแก้ไขนี้ด้วยโมดูลสีใหม่มันจะช่วยให้คุณสามารถระบุค่าอัลฟาเมื่อใดก็ตามที่คุณระบุสี w3.org/TR/css3-color

— meandmycode

71

ที่จริงแล้วความทึบขององค์ประกอบลูกนั้นคูณด้วยความทึบขององค์ประกอบหลักซึ่งไม่ถูกแทนที่ ดังนั้นสำหรับตัวอย่างเช่นถ้าp's ทึบอยู่.6และspan' s ทึบอยู่แล้วความทึบแสงที่แท้จริงของข้อความในช่วงที่จะเป็น.5 0.3

— chharvey

1

คาดเดาดังนั้น แต่เนื่องจากเป็นพื้นหลังที่โปร่งแสงคุณจึงไม่จำเป็นต้องใช้ตัวกรอง / ความทึบ: codepen.io/anon/pen/ksJug

— Stijn Sanders

5

@chharvey สิ่งที่ควรจะเกิดขึ้นถ้าฉันกำหนดopacity:.5ให้กับผู้ปกครองและopacity:2องค์ประกอบของเด็ก?

— Alexander

10

@ อเล็กซานเดอร์ฉันดีใจที่คุณถามคำถามนั้น ศาสตร์หนึ่งจะสงสัยว่าเด็กจะส่งกลับมาที่ความทึบของ 1 อย่างไรก็ตามการopacity:2;เป็นCSS ที่ไม่ถูกต้อง ค่าของopacityคุณสมบัติต้องอยู่ในช่วงรวม [0,1]

— chharvey

2276

ใช้ภาพPNGกึ่งโปร่งใสหรือใช้ CSS 3:

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

นี่คือบทความจาก css3.info, ความทึบ, RGBA และการประนีประนอม (2007-06-03)

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

ขยายตัวอย่างข้อมูล

— Peter Mortensen
แหล่งที่มา

86

เป็นไปได้ไหมที่จะใช้สีหกเหลี่ยม? ชอบ #fff หรือไม่

— กรัม

35

@grm: W3C พิจารณาที่จะแนะนำรูปแบบรหัสเลขฐานสิบหก #RRGGBBAA แต่พวกเขาตัดสินใจที่จะไม่ (ด้วยเหตุผลต่าง ๆ ) ดังนั้นเราจึงไม่สามารถทำได้

— outis

95

@grm กับSASSคุณสามารถbackground-color: rgba(#000, .5);

— Jürgen Paul

2

น่าจะชี้ให้เห็นว่าหากคุณต้องการใช้ความโปร่งใสเบราว์เซอร์ทุกตัวที่รองรับ RGBA ยังรองรับ HSLAซึ่งเป็นการทำแผนที่สีที่ใช้งานง่ายกว่า IE8 เป็นเบราว์เซอร์ปลอมที่มีนัยสำคัญเพียงอย่างเดียวที่ล้มเหลวในการสนับสนุนดังนั้นหากมีการ จำกัด การใช้งาน HSL (A) สำหรับทุกสี

— iono

19

@outis: ข่าวดี#RRGGBBAA ขณะนี้อยู่ในระดับสี 4

— BoltClock

476

ใน Firefox 3 และ Safari 3 คุณสามารถใช้ RGBA เช่นเฟรด Scholly กล่าวถึง

เคล็ดลับเล็กน้อยที่รู้จักกันคือคุณสามารถใช้ใน Internet Explorer ได้เช่นกันโดยใช้ตัวกรองไล่ระดับสี

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

ตัวเลขฐานสิบหกตัวแรกกำหนดค่าอัลฟาของสี

โซลูชันทั้งหมดของเบราว์เซอร์ทั้งหมด:

.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)";
}

นี้เป็นจากความโปร่งใสพื้นหลัง CSS โดยไม่มีผลต่อองค์ประกอบของเด็กผ่าน RGBA และตัวกรอง

ภาพหน้าจอพิสูจน์ผลลัพธ์:

นี่คือเมื่อใช้รหัสต่อไปนี้:

 <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>

โครเมี่ยม 33 IE11 IE9 IE8

— Adrien Be
แหล่งที่มา

1

แต่ไม่ใช่ใน IE8 ฉันพยายามไวยากรณ์ -ms-กรองใหม่ แต่ก็ยังไม่ได้ทำงานสำหรับฉัน :(

— philfreo

5

โพสต์นี้แสดงวิธีการทำใน IE8: robertnyman.com/2010/01/11/…

— Slapout

14

@philfreo: หากคุณเปลี่ยนรหัสแรกของ Sebastian เป็น "background: rgb (0, 0, 0) transparent;" ตอนนี้มันควรจะทำงานใน IE8 นี่เป็นการบั่นทอนฉันมาระยะหนึ่งแล้ว!

— Tom Chantler

ตัวกรอง: progid ใช้งานได้ดีกับ IE 9. สีคือ: โปร่งใส, แดง, เขียว, น้ำเงิน - ค่าเลขฐานสิบหกทั้งหมดสองค่า

— Thorsten Niehues

1

@AdrienBe - ฉันแก้ไขคำตอบของคุณตามคำแนะนำของคุณ น่าเสียดายที่ฉันออกจากพื้นที่ว่างของคำถามและคำตอบนี้มาระยะหนึ่งแล้วดังนั้นฉันจึงไม่สามารถเพิ่มการสนทนานี้ได้ในขณะนี้

— user664833

108

นี่เป็นทางออกที่ดีที่สุดที่ฉันจะทำได้ไม่ใช้ CSS 3 และใช้งานได้ดีกับ Firefox, Chrome และ Internet Explorer เท่าที่ฉันจะเห็น

วางคอนเทนเนอร์divและลูกสองคนdivอยู่ในระดับเดียวกันหนึ่งสำหรับเนื้อหาหนึ่งสำหรับพื้นหลัง และใช้ CSS ปรับขนาดพื้นหลังให้พอดีกับเนื้อหาและวางพื้นหลังไว้ด้านหลังโดยใช้ z-index

.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>

ขยายตัวอย่างข้อมูล

— Gorkem Pacaci
แหล่งที่มา

19

เขากล่าวว่า "โดยไม่แยกข้อความและพื้นหลังออกเป็นสององค์ประกอบในตำแหน่งที่วางซ้อนกัน" ขอบคุณอย่างไรก็ตามนี่เป็นวิธีแก้ไขที่ดีและมีประโยชน์ แต่ในบางกรณีคุณต้องการให้องค์ประกอบทึบแสงเป็นส่วนย่อยของกึ่งโปร่งใส

— Rolf

ฉันตอบเหมือนกันในคำถาม SO อื่น แต่เพิ่มหลักฐานการใช้ jsfiddle & สกรีนชอต (IE7 +) ดูที่นี่ถ้าสนใจstackoverflow.com/a/21984546/759452

— Adrien Be

@Gorkem Pacaci: ตรวจสอบให้แน่ใจว่าความทึบของคุณสมบัติเป็น "จริงๆ" ข้ามเบราว์เซอร์คุณสามารถใช้ข้อมูลโค้ดนี้จาก CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

— Adrien ได้

ทำไมไม่ทำเช่นนี้กับองค์ประกอบหลอกๆเหมือน:afterและหลีกเลี่ยงการเพิ่มมาร์กอัป

— AndFisher

64

สำหรับสีพื้นหลังกึ่งโปร่งใสที่เรียบง่ายโซลูชันด้านบน (ภาพ CSS3 หรือ bg) เป็นตัวเลือกที่ดีที่สุด อย่างไรก็ตามหากคุณต้องการทำสิ่งที่นักเล่นชื่นชอบ (เช่นภาพเคลื่อนไหว, พื้นหลังหลาย ๆ แบบ ฯลฯ ) หรือหากคุณไม่ต้องการใช้ CSS3 คุณสามารถลองใช้“ เทคนิคบานหน้าต่าง”:

.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>

เทคนิคนี้ทำงานโดยใช้“ เลเยอร์” สองอันภายในองค์ประกอบนอกบานหน้าต่าง:

หนึ่ง ("ย้อนกลับ") ที่เหมาะกับขนาดขององค์ประกอบบานหน้าต่างโดยไม่มีผลต่อการไหลของเนื้อหา
และหนึ่ง ("ต่อ") ที่มีเนื้อหาและช่วยกำหนดขนาดของบานหน้าต่าง

position: relativeในบานหน้าต่างด้านเป็นสิ่งสำคัญ; มันบอกเลเยอร์ด้านหลังให้พอดีกับขนาดของบานหน้าต่าง (ถ้าคุณต้องการแท็กจะเป็นที่แน่นอนเปลี่ยนบานหน้าต่างจากไปและห่อทุกสิ่งที่อย่างในตำแหน่งแท็ก.)

ข้อได้เปรียบหลักเทคนิคนี้มีเหนือกว่ารายการที่คล้ายกันข้างต้นคือบานหน้าต่างไม่จำเป็นต้องมีขนาดที่ระบุ ตามที่เขียนไว้ข้างต้นมันจะเต็มความกว้าง (เลย์เอาต์องค์ประกอบบล็อกปกติ) และสูงที่สุดเท่าที่เนื้อหา องค์ประกอบบานหน้าต่างด้านนอกสามารถปรับขนาดได้ตามที่คุณต้องการตราบใดที่มันเป็นรูปสี่เหลี่ยมผืนผ้า (นั่นคือบล็อกแบบอินไลน์จะทำงานได้

นอกจากนี้ยังให้อิสระมากมายกับพื้นหลัง คุณมีอิสระที่จะใส่ทุกอย่างลงในองค์ประกอบด้านหลังและไม่ส่งผลกระทบต่อการไหลของเนื้อหา (ถ้าคุณต้องการเลเยอร์ย่อยขนาดเต็มหลาย ๆ ชุดให้แน่ใจว่าพวกเขามีตำแหน่ง: แน่นอนความกว้าง / ความสูง: 100% และด้านบน / ล่าง / ซ้าย / ขวา: อัตโนมัติ)

รูปแบบหนึ่งที่อนุญาตให้มีการปรับการแทรกพื้นหลัง (ผ่านด้านบน / ล่าง / ซ้าย / ขวา) และ / หรือการปักหมุดพื้นหลัง (โดยการลบคู่ซ้าย / ขวาหรือบน / ล่าง / คู่ล่าง) อย่างใดอย่างหนึ่งคือใช้ CSS ต่อไปนี้แทน:

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

ตามที่เขียนมาใช้งานได้ใน Firefox, Safari, Chrome, IE8 + และ Opera แม้ว่า IE7 และ IE6 ต้องใช้ CSS และนิพจน์พิเศษ IIRC และครั้งสุดท้ายที่ฉันตรวจสอบ CSS ชุดที่สองไม่ทำงานใน Opera

สิ่งที่ต้องระวัง:

อิลิเมนต์ที่ลอยอยู่ภายในของเลเยอร์ cont จะไม่ถูกเก็บไว้ คุณจะต้องตรวจสอบให้แน่ใจว่าพวกเขาจะถูกล้างออกหรือบรรจุอยู่มิฉะนั้นพวกเขาจะหลุดออกจากด้านล่าง
ระยะขอบไปที่องค์ประกอบบานหน้าต่างและช่องว่างภายในไปที่องค์ประกอบต่อเนื่อง อย่าใช้สิ่งที่ตรงกันข้าม (ระยะขอบบน cont หรือ padding บนบานหน้าต่าง) หรือคุณจะค้นพบสิ่งแปลกประหลาดเช่นหน้านั้นกว้างกว่าหน้าต่างเบราว์เซอร์เล็กน้อย
ดังที่ได้กล่าวมาแล้วทั้งหมดต้องเป็นแบบบล็อกหรือแบบอินไลน์บล็อก คุณสามารถใช้<div>s แทนCSS เพื่อทำให้ CSS ของคุณง่ายขึ้น

การสาธิตที่สมบูรณ์กว่าแสดงความยืดหยุ่นของเทคนิคนี้โดยใช้ควบคู่กับdisplay: inline-blockและทั้งauto& widths / s เฉพาะmin-height:

.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>

ขยายตัวอย่างข้อมูล

และนี่คือตัวอย่างสดของเทคนิคที่ใช้อย่างกว้างขวาง:

— Slipp D. Thompson
แหล่งที่มา

ในสถานการณ์ใดจะไม่ต้องการใช้ CSS3 สำหรับสิ่งนี้

— Burkely91

@ Burkely91 หากคุณสามารถทำได้ใน CSS3 ให้ใช้มันอย่างแน่นอน แต่พื้นหลัง CSS3 ไม่รองรับเนื้อหาทุกประเภทหรือความยืดหยุ่นของรูปแบบเต็ม ตัวอย่างซองจดหมาย / ตัวอักษรด้านบนนั้นยากที่จะดึงออกด้วย CSS3 เนื่องจากขอบการทำซ้ำอย่างอิสระและการเติมกึ่งกลาง โปรดทราบว่าคำตอบนี้เขียนขึ้นเมื่อ 5 ปีก่อนก่อนที่ CSS3 จะรองรับอย่างกว้างขวาง

— Slipp D. Thompson

2

@Igor Ivancha ย้อนกลับการเปลี่ยนแปลงของคุณ ฉันขอโทษการเปลี่ยนการเยื้องจากแบบฟอร์มที่ฉันต้องการ (แท็บ) เป็นของคุณ (2 ช่องว่าง) ไม่เจ๋ง คุณอาจมีเหตุผลที่ดีในการใช้การเว้นวรรค 2 มิติในโครงการโค้ดแบบวันต่อวันของคุณ แต่สำหรับงานนำเสนอบนเว็บผมเชื่อว่าแท็บต่างๆมีการชนะที่ชัดเจน - การเยื้องที่ลึกกว่าทำให้มองเห็นลำดับชั้นได้ง่ายขึ้น ง่ายต่อการแปลงแท็บไปยังช่องว่างได้อย่างน่าเชื่อถือและเป็นรูปแบบที่เข้ากันได้กับผู้อ่านทั้งหมดมากขึ้น

— Slipp D. Thompson

@Igor Ivancha นอกจากนี้ยังปรากฏว่าคุณเรียกใช้รหัสว่า beautifier ที่ใส่ตัวเลือก CSS และคุณสมบัติทุกอย่างในบรรทัดของตัวเอง ตัวอย่างของฉันถูกเขียนด้วยการแบ่งบรรทัดโดยเจตนาและการเว้นวรรคไปยังกลุ่มที่มีเหตุผลซึ่งผู้อ่านควรเข้าใจร่วมกัน - เช่นส่วนใหญ่width:& height:คุณสมบัติแบ่งปันเส้นเพราะมันเป็นโครงสร้างประเภทเดียวกันและเข้าใจได้ดีกว่าในรูปแบบ 2 มิติไม่ใช่ คู่ของข้อ จำกัด 1 มิติ นอกจากนี้บางบรรทัดมีจำนวนที่พอเหมาะเพราะมันมีเนื้อหาซ้ำ ๆ กันซึ่งไม่ใช่สิ่งสำคัญที่จะต้องแสดงออก

— Slipp D. Thompson

@Igor Ivancha การจัดกลุ่มและการจัดวางแบบลอจิคัลเป็นสิ่งสำคัญอย่างยิ่งในการเขียนสติที่เข้าใจง่ายเหมือนกับการเขียนทุกชนิด การเปลี่ยนแปลงที่คุณทำมีค่าเท่ากับการเข้าไปโพสต์และลบการแบ่งย่อหน้าทั้งหมดและการขึ้นบรรทัดใหม่ที่บังคับหลังแต่ละประโยค หากคุณต้องการที่จะอวดความกระตือรือร้นในงานของคุณเองคุณก็มีอิสระที่จะทำเช่นนั้น แต่โปรดอย่าทำให้ตัวละครและการแสดงออกทางความหมายในการทำงานของคนอื่นแย่ลง

— Slipp D. Thompson

58

.pngมันจะดีกว่าที่จะใช้กึ่งโปร่งใส

เพียงเปิดPhotoshopสร้าง2x2ภาพพิกเซล (การเลือก1x1อาจทำให้เกิดบั๊กของ Internet Explorer! ) เติมด้วยสีเขียวและตั้งค่าความทึบใน "แท็บเลเยอร์" เป็น 60% จากนั้นบันทึกและทำให้เป็นภาพพื้นหลัง:

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

มันทำงานได้เย็นแน่นอนยกเว้นในน่ารักInternet Explorer 6 มีการแก้ไขที่ดีกว่า แต่มีแฮ็คอย่างรวดเร็ว:

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

มีเคล็ดลับในการย่อมาร์กอัปให้น้อยที่สุด: ใช้องค์ประกอบปลอมเป็นพื้นหลังและคุณสามารถตั้งค่าความทึบได้โดยไม่กระทบต่อองค์ประกอบหลักและลูก ๆ :

การสาธิต

เอาท์พุท:

ความทึบของพื้นหลังด้วยองค์ประกอบปลอม

รหัสที่เกี่ยวข้อง:

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>

ขยายตัวอย่างข้อมูล

การสนับสนุนเบราว์เซอร์คือInternet Explorer 8และใหม่กว่า

— เว็บกี้
แหล่งที่มา

23

วิธีที่ง่ายที่สุดคือการใช้ภาพ PNGพื้นหลังกึ่งโปร่งใสภาพ

คุณสามารถใช้ JavaScript เพื่อให้ทำงานในInternet Explorer 6หากคุณต้องการ

ฉันใช้วิธีการที่ระบุไว้ในPNG แบบโปร่งใสใน Internet Explorer 66

นอกจากนั้นคุณสามารถปลอมมันได้โดยใช้องค์ประกอบพี่น้องสองแบบเคียงข้างกันทำให้องค์ประกอบกึ่งโปร่งใสหนึ่งอันจากนั้นวางตำแหน่งอื่น ๆ ไว้ด้านบนอย่างแน่นอน

— คริส
แหล่งที่มา

2

สิ่งที่ฉันต้องการคือสีพื้นหลังแบบเรียบง่ายขนาด PNG ใดที่คุณจะเสนอให้ฉันสร้างด้วยสีนี้ 1x1 จะทำให้การเรนเดอร์ทำงานได้มากพิกเซลมากเกินไปทำให้ PNG นี้ค่อนข้างใหญ่ (ควรเป็นขนาดไฟล์ตั้งแต่ถูกบีบอัด แต่การเรนเดอร์ยังคงต้องยกเลิกการบีบอัดเพื่อใช้งาน) ...

— นเดอร์ Stijn Sanders

3

ฉันขอแนะนำบางอย่างเช่น 30px x 30px ซึ่งใช้หน่วยความจำน้อยกว่าเมื่อแสดงผลซ้ำกว่า 1x1 และยังเล็กพอที่จะลดการใช้แบนด์วิดท์

— คริส

21

วิธีนี้ช่วยให้คุณมีภาพในพื้นหลังและไม่เพียง แต่สีทึบและสามารถใช้เพื่อให้มีความโปร่งใสในคุณสมบัติอื่น ๆ เช่นเส้นขอบ ไม่จำเป็นต้องใช้รูปภาพ PNG แบบโปร่งใส

ใช้:before(หรือ:after) ใน CSS และให้ค่าความทึบเพื่อให้องค์ประกอบมีความทึบดั้งเดิม ดังนั้นคุณสามารถใช้: ก่อนที่จะสร้างองค์ประกอบ faux และให้พื้นหลังโปร่งใส (หรือเส้นขอบ) ที่คุณต้องการและย้ายไปอยู่ด้านหลังเนื้อหาที่คุณต้องการให้ทึบด้วยz-indexที่คุณต้องการและย้ายไปอยู่เบื้องหลังเนื้อหาที่คุณต้องการที่จะให้มีสีขาวขุ่น

ตัวอย่าง (ไวโอลิน ) (โปรดทราบว่าDIVคลาสที่dadมีเพียงเพื่อให้บริบทและความคมชัดกับสีองค์ประกอบพิเศษนี้ไม่จำเป็นจริง ๆ และสี่เหลี่ยมสีแดงถูกย้ายไปเล็กน้อยและไปทางขวาเพื่อให้มองเห็นพื้นหลังfancyBgองค์ประกอบ):

<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>

ด้วย CSS นี้:

.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;
}

ในกรณีนี้.fancyBg:beforeมีคุณสมบัติ CSS ที่คุณต้องการด้วยความโปร่งใส (พื้นหลังสีแดงในตัวอย่างนี้ แต่อาจเป็นรูปภาพหรือเส้นขอบ) มันอยู่ในตำแหน่งที่แน่นอนที่จะย้ายไปอยู่ด้านหลัง.fancyBg(ใช้ค่าเป็นศูนย์หรืออะไรก็ตามที่เหมาะสมกับความต้องการของคุณมากกว่า)

— frozenkoi
แหล่งที่มา

17

ปัญหาคือว่าข้อความที่จริงมีความทึบแสงเต็มรูปแบบในตัวอย่างของคุณ มันมีความทึบเต็มภายในpแท็ก แต่pแท็กนั้นมีลักษณะกึ่งโปร่งใส

คุณสามารถเพิ่มภาพพื้นหลัง PNG กึ่งโปร่งใสแทนการตระหนักถึงมันใน CSS หรือแยกข้อความและหารออกเป็นสององค์ประกอบและย้ายข้อความไปที่กล่อง (ตัวอย่างเช่นขอบลบ)

ไม่เช่นนั้นจะไม่สามารถทำได้

เช่นเดียวกับ Chris ที่กล่าวถึง: หากคุณใช้ไฟล์ PNG ด้วยความโปร่งใสคุณต้องใช้วิธีการแก้ปัญหา JavaScript เพื่อให้ทำงานได้ใน Internet Explorer ที่น่ารำคาญ ...

— SvenFinke
แหล่งที่มา

15

คำตอบเหล่านี้เกือบทั้งหมดถือว่าผู้ออกแบบต้องการพื้นหลังสีทึบ ถ้าผู้ออกแบบต้องการจริงรูปภาพเป็นพื้นหลังเป็นเพียงการแก้ปัญหาที่แท้จริงในขณะนี้คือ JavaScript เช่น jQuery Transify ปลั๊กอินที่กล่าวถึงในที่อื่น ๆ

สิ่งที่เราต้องทำคือการเข้าร่วมการสนทนากลุ่มคณะทำงาน CSS และทำให้พวกเขาให้คุณสมบัติพื้นหลังความทึบ! มันควรจะทำงานร่วมกับคุณสมบัติหลายพื้นหลัง

— thinsoldier
แหล่งที่มา

14

นี่คือวิธีที่ฉันทำ (อาจไม่เหมาะสม แต่ก็ใช้งานได้):

สร้างสิ่งdivที่คุณต้องการให้เป็นกึ่งโปร่งใส ให้คลาส / id เว้นว่างไว้ไว้และปิด ตั้งความสูงและความกว้างที่กำหนดไว้ (เช่น 300 พิกเซลคูณ 300 พิกเซล) ให้ความทึบแสง 0.5 หรือสิ่งที่คุณชอบและสีพื้นหลัง

จากนั้นใต้ div นั้นโดยตรงให้สร้าง div อื่นด้วย class / id อื่น สร้างย่อหน้าไว้ข้างในซึ่งคุณจะวางข้อความของคุณ กำหนดdivตำแหน่ง: สัมพัทธ์และบน: -295px(นั่นคือลบ 295 พิกเซล) ให้ดัชนี z เป็น 2 เพื่อการวัดที่ดีและตรวจสอบให้แน่ใจว่าความทึบของมันคือ 1 กำหนดย่อหน้าของคุณตามที่คุณต้องการ แต่ให้แน่ใจว่าขนาดนั้นน้อยกว่าที่หนึ่งdivจึงไม่ล้น

แค่นั้นแหละ. นี่คือรหัส:

.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>

ขยายตัวอย่างข้อมูล

ทำงานได้ใน Safari 2.x แต่ฉันไม่รู้เกี่ยวกับ Internet Explorer

— paris ionescu
แหล่งที่มา

องค์ประกอบพิเศษสามารถหลีกเลี่ยงได้และใช้องค์ประกอบปลอมเช่น:beforeor:after

— frozenkoi

12

นี่คือปลั๊กอิน jQuery ที่จะจัดการทุกอย่างให้คุณ Transify ( Transify - ปลั๊กอิน jQuery เพื่อใช้โปร่งใส / ทึบกับพื้นหลังขององค์ประกอบ )

ฉันพบปัญหานี้ทุกครั้งดังนั้นฉันจึงตัดสินใจเขียนบางสิ่งที่จะทำให้ชีวิตง่ายขึ้นมาก สคริปต์มีขนาดน้อยกว่า 2 KB และต้องการรหัสเพียงหนึ่งบรรทัดเพื่อให้มันทำงานได้และมันจะจัดการกับภาพเคลื่อนไหวที่ทึบของพื้นหลังหากคุณต้องการ

— joren
แหล่งที่มา

11

ในขณะที่กลับผมเขียนเกี่ยวกับเรื่องนี้ในครอเบราว์เซอร์พื้นหลังโปร่งใสด้วย CSS

Bizarrely Internet Explorer 6 จะช่วยให้คุณสามารถทำให้พื้นหลังโปร่งใสและทำให้ข้อความอยู่ด้านบนทึบเต็มที่ สำหรับเบราว์เซอร์อื่นฉันแนะนำให้ใช้ไฟล์ PNG แบบโปร่งใส

— philnash
แหล่งที่มา

10

ความทึบของพื้นหลัง แต่ไม่มีข้อความที่มีแนวคิดบางอย่าง อาจใช้ภาพกึ่งโปร่งใสหรือซ้อนทับองค์ประกอบเพิ่มเติม

— fearoffours
แหล่งที่มา

9

หากคุณเป็นผู้ชายPhotoshopคุณสามารถใช้:

 #some-element {
  background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
 }

หรือ:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}

— ราจราวัต
แหล่งที่มา

8

ในการสร้างพื้นหลังขององค์ประกอบกึ่งโปร่งใส แต่มีเนื้อหา (ข้อความและรูปภาพ) ขององค์ประกอบทึบแสงคุณต้องเขียนโค้ด CSS สำหรับภาพนั้นและคุณต้องเพิ่มแอททริบิวต์หนึ่งที่เรียกว่าopacityมีค่าต่ำสุด

ตัวอย่างเช่น,

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

// ยิ่งค่าน้อยลงเท่าไหร่ก็ยิ่งมีความโปร่งใสมากขึ้นเท่านั้นแร่ที่มีค่าน้อยลงก็จะโปร่งใส

— Pushp Singh
แหล่งที่มา

นี่เป็นวิธีหนึ่งในเบราว์เซอร์สมัยใหม่ ฉันรวมกับค่า rgba เป็นทางเลือก

— Tahir Khalid

ใช่ถูกต้อง. นี่เป็นวิธีหนึ่งในการจัดการกับเบราว์เซอร์ที่ทันสมัย

— Pushp Singh เมื่อ

คุณหมายถึงอะไรโดย"แร่มูลค่าที่น้อยกว่าจะโปร่งใส" (ดูเหมือนจะเข้าใจยาก) (ตอบสนองโดยการแก้ไขคำตอบของคุณไม่ได้อยู่ที่นี่ในความคิดเห็นหากเหมาะสม)

— Peter Mortensen

7

CSS 3 มีวิธีแก้ไขปัญหาของคุณอย่างง่าย ๆ ใช้:

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

ที่นี่rgbaหมายถึงค่าสีแดงสีเขียวสีน้ำเงินและอัลฟา ได้รับค่าสีเขียวเนื่องจากได้รับ 255 และโปร่งใสครึ่งหนึ่งโดยค่า 0.5 อัลฟา

— Touhid Rahman
แหล่งที่มา

สิ่งนี้แตกต่างจากคำตอบก่อนหน้านี้อย่างไร

— Peter Mortensen

6

หากคุณกำลังใช้น้อยfade(color, 30%)คุณสามารถใช้

— อเล็กซ์
แหล่งที่มา

6

สีพื้นหลัง: rgba (255, 0, 0, 0.5); ดังกล่าวข้างต้นเป็นคำตอบที่ดีที่สุดเพียงแค่ใส่ ในการบอกว่าใช้ CSS 3 แม้แต่ในปี 2013 นั้นไม่ง่ายเพราะระดับการสนับสนุนจากเบราว์เซอร์ที่หลากหลายนั้นเปลี่ยนแปลงไปตามการวนซ้ำทุกครั้ง

ในขณะbackground-colorที่เบราว์เซอร์หลักทุกตัวรองรับ (ไม่ใช่ของใหม่สำหรับ CSS 3) [1] ความโปร่งแสงของอัลฟ่าอาจเป็นเรื่องยากโดยเฉพาะกับ Internet Explorer ก่อนรุ่น 9 และมีขอบสีบน Safari ก่อนรุ่น 5.1 [2]

การใช้บางอย่างเช่นเข็มทิศหรือSASSสามารถช่วยในการผลิตและใช้งานข้ามแพลตฟอร์มได้

[1] W3Schools: คุณสมบัติ CSS สีพื้นหลัง

[2] บล็อกของนอร์แมน: รายการตรวจสอบการสนับสนุนเบราว์เซอร์ CSS3 (ตุลาคม 2012)

— จะนีลเซ่น
แหล่งที่มา

4

คุณสามารถแก้ปัญหานี้สำหรับInternet Explorer 8โดย (ab) โดยใช้ไวยากรณ์การไล่ระดับสี รูปแบบสีคือ ARGB หากคุณใช้ตัวประมวลผลล่วงหน้าSassคุณสามารถแปลงสีโดยใช้ฟังก์ชันในตัว "ie-hex-str ()"

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

— เฮนริก
แหล่งที่มา

4

คุณสามารถใช้CSS 3บริสุทธิ์: rgba(red, green, blue, alpha)ซึ่งalphaเป็นระดับของความโปร่งใสที่คุณต้องการ ไม่จำเป็นต้องใช้ JavaScript หรือ jQuery

นี่คือตัวอย่าง:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}

— ปีเตอร์มอร์เทนเซ่น
แหล่งที่มา

3

<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
    <img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>

http://jsfiddle.net/x2ukko7u/ ?

— premgowda
แหล่งที่มา

2

คุณสามารถทำได้rgba color codeโดยใช้ CSS เช่นนี้ได้รับด้านล่าง

.imgbox img{
  height: 100px;
  width: 200px;
  position: relative;
}
.overlay{
  background: rgba(74, 19, 61, 0.4);
  color: #FFF;
  text-shadow: 0px 2px 5px #000079;
  height: 100px;
  width: 300px;
  position: absolute;
  top: 10%;
  left: 25%;
  padding: 25px;
}

<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
  <div class="overlay">
    <p>This is Simple Text.</p>
  </div>
</div>

ขยายตัวอย่างข้อมูล

— Rudra
แหล่งที่มา

1

มีวิธีแก้ปัญหาที่ง่ายกว่าในการวางซ้อนทับบนรูปภาพใน div เดียวกัน ไม่ใช่การใช้เครื่องมือนี้อย่างถูกต้อง แต่ใช้งานได้อย่างมีเสน่ห์ในการสร้างภาพซ้อนทับโดยใช้ CSS

ใช้เงาสิ่งที่ใส่เข้าไปแบบนี้:

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

นั่นคือทั้งหมดที่ :)

— edd2110
แหล่งที่มา

1

คุณสามารถใช้RGBA (red, green, blue, alpha)ในCSS บางสิ่งเช่นนี้

ดังนั้นการทำอะไรแบบนี้จะเป็นการทำงานในกรณีของคุณ:

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}

— Alireza
แหล่งที่มา

1

ตามมุมมองของฉันวิธีที่ดีที่สุดในการใช้สีพื้นหลังที่มีความทึบแสงมีดังนี้ หากเราใช้สิ่งนี้เราจะไม่สูญเสียความทึบแสงขององค์ประกอบอื่น ๆ เช่นสีทดสอบเส้นขอบ ฯลฯ

background-color: rgba(71, 158, 0, 0.8);

ใช้สีพื้นหลังด้วยความทึบ

background-color: rgba(R, G, B, Opacity);

— Vinod Kumar
แหล่งที่มา

0

ปกติฉันจะใช้ชั้นนี้สำหรับการทำงานของฉัน มันค่อนข้างดี

.transparent {
  filter: alpha(opacity=50); /* Internet Explorer */
  -khtml-opacity: 0.5;       /* KHTML and old Safari */
  -moz-opacity: 0.5;         /* Firefox and Netscape */
  opacity: 0.5;              /* Firefox, Safari, and Opera */
}

ขยายตัวอย่างข้อมูล

— Cengkuru Michael
แหล่งที่มา

0

จะทำงานให้ฉันเมื่อมีการใช้รูปแบบเพื่อให้คนที่ทำงานสำหรับฉันคือ#AARRGGBB #1C00ff00ลองดูสิเพราะฉันเห็นว่ามันใช้ได้กับบางคนและไม่ได้ทำงานให้คนอื่น ฉันใช้มันใน CSS

— โดนัลด์ Shahini
แหล่งที่มา

0

คุณสามารถใช้ค่าความทึบที่ผนวกเข้ากับค่าเลขฐานสิบหก:

background-color: #11ffeeaa;

ในตัวอย่างนี้aaคือความทึบ ความทึบของ00วิธีการที่โปร่งใสและffหมายถึงสีทึบ

ความทึบเป็นตัวเลือกดังนั้นคุณสามารถใช้ค่าเลขฐานสิบหกได้เช่นเคย:

background-color: #11ffee;

คุณยังสามารถใช้วิธีเดิมด้วยrgba():

background-color: rgba(117, 190, 218, 0.5);

และbackgroundจดชวเลขถ้าคุณต้องการให้แน่ใจว่าพื้นหลังไม่มีสไตล์อื่น ๆ เช่นภาพหรือการไล่ระดับสี:

background: #11ffeeaa;

จากข้อกำหนดของ Mozilla ( https://developer.mozilla.org/en-US/docs/Web/CSS/background-color ):

/* Keyword values */
background-color: red;
background-color: indigo;

/* Hexadecimal value */
background-color: #bbff00;    /* Fully opaque */
background-color: #bf0;       /* Fully opaque shorthand */
background-color: #11ffee00;  /* Fully transparent */
background-color: #1fe0;      /* Fully transparent shorthand  */
background-color: #11ffeeff;  /* Fully opaque */
background-color: #1fef;      /* Fully opaque shorthand  */

/* RGB value */
background-color: rgb(255, 255, 128);        /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */

/* HSL value */
background-color: hsl(50, 33%, 25%);         /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */

/* Special keyword values */
background-color: currentcolor;
background-color: transparent;

/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;

— AMS777
แหล่งที่มา

-2

คุณสามารถใช้สี RGB ที่มีความทึบเหมือนรหัสสีใน RGB (63, 245, 0) และเพิ่มความทึบ (เช่น 63, 245, 0, 0.5) และยังแทนที่ RGB ด้วย RGBA Aจะใช้สำหรับความทึบ

div {
  background: rgba(63, 245, 0, 0.5);
}

ขยายตัวอย่างข้อมูล

— วีเจย์ชาร์
แหล่งที่มา