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

ตัวอย่าง

ลิงก์ทั้งหมดในส่วนท้ายจำเป็นต้องมีสัญลักษณ์แสดงหัวข้อย่อยที่กำหนดเอง (ภาพพื้นหลัง) และความทึบของกระสุนที่กำหนดเองควรเป็น 50%

HTML

<div id="footer">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</div>  

CSS

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
}  

สิ่งที่ฉันได้ลอง

ฉันพยายามตั้งค่าความทึบของไอเท็มในรายการเป็น 50% แต่จากนั้นความทึบของข้อความลิงก์ก็เช่นกัน 50% - และดูเหมือนจะไม่มีทางที่จะรีเซ็ตความทึบขององค์ประกอบลูกได้:

#footer ul li {
    background: url(/images/arrow.png) no-repeat 0 50%;
    /* will also set the opacity of the link text */        
    opacity: 0.5;
}

ฉันยังลองใช้ rgba แต่นั่นไม่มีผลกระทบใด ๆ กับภาพพื้นหลัง:

#footer ul li {
    /* rgba doesn't apply to the background image */
    background: rgba(255, 255, 255, 0.5) url(/images/arrow.png) no-repeat 0 50%;
}

คุณสามารถใช้ CSS กับlinear-gradient()rgba()

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

นำภาพของคุณไปเป็นโปรแกรมแก้ไขรูปภาพ, ลดความทึบ, บันทึกเป็น. png และใช้มันแทน

สิ่งนี้จะทำงานกับทุกเบราว์เซอร์

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

หากคุณไม่ต้องการความโปร่งใสที่จะส่งผลกระทบต่อภาชนะทั้งหมดและลูก ๆ ของมันตรวจสอบวิธีแก้ปัญหานี้ คุณต้องมีลูกที่อยู่ในตำแหน่งที่แน่นอนกับผู้ปกครองที่ค่อนข้างอยู่ในตำแหน่ง

ตรวจสอบตัวอย่างได้ที่http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

หากคุณใช้ภาพเป็นสัญลักษณ์แสดงหัวข้อคุณอาจพิจารณา: ก่อนองค์ประกอบหลอก

#footer ul li {
}

#footer ul li:before {
    content: url(/images/arrow.png);
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity:.50;
}

คุณสามารถใส่ภาพใน div: after หรือ div: before และตั้งค่าความทึบของ "virtual div"

div:after {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
  opacity: 0.25;
}

พบได้ที่นี่ http://css-tricks.com/snippets/css/transparent-background-images/

#footer ul li {
  position: relative;
  opacity: 0.99;
}

#footer ul li::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: url(/images/arrow.png) no-repeat 0 50%;
  opacity: 0.5;
}

แฮ็คที่มีความทึบแสง. 99 (น้อยกว่า 1) สร้างบริบทดัชนี z ดังนั้นคุณจึงไม่ต้องกังวลเกี่ยวกับค่าดัชนี z ทั่วโลก (ลองลบมันออกและดูว่าเกิดอะไรขึ้นในการสาธิตครั้งต่อไปโดยที่ wrapper หลักมีดัชนี z เป็นบวก)
หากองค์ประกอบของคุณมีดัชนี z อยู่แล้วคุณไม่ต้องการแฮ็คนี้

ตัวอย่างของเทคนิคนี้

น่าเสียดายที่ในขณะที่เขียนคำตอบนี้ไม่มีวิธีการทำเช่นนี้ คุณต้อง:

1. ใช้ภาพกึ่งโปร่งใสสำหรับพื้นหลัง (ง่ายกว่ามาก)
2. เพิ่มองค์ประกอบพิเศษ (เช่น div) ถัดจากเด็กที่คุณต้องการทึบแสงเพิ่มพื้นหลังและหลังจากทำให้กึ่งโปร่งใสวางไว้ด้านหลังเด็กที่กล่าวถึง

ตัวเลือกอื่นคือCSS Tricksวิธีการแทรกองค์ประกอบปลอมขนาดที่แน่นอนขององค์ประกอบเดิมด้านหลังเพื่อปลอมผลพื้นหลังทึบที่เรากำลังมองหา บางครั้งคุณจะต้องตั้งค่าความสูงสำหรับองค์ประกอบหลอก

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

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

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

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

หากต้องการปรับแต่งสิ่งต่าง ๆ อย่างแท้จริงฉันแนะนำให้เลือกตัวเลือกที่เหมาะสมในการกำหนดเป้าหมายเบราว์เซอร์ นี่เป็นสิ่งเดียวที่ทำงานกับฉันเมื่อฉันไม่สามารถทำให้ IE7 และ IE8 "เล่นกับผู้อื่นได้อย่างดี" (เนื่องจากฉันกำลังทำงานให้กับ บริษัท ซอฟต์แวร์ที่ให้การสนับสนุนพวกเขาต่อไป)

/* color or background image for all browsers, of course */            
#myBackground {
    background-color:#666; 
}
/* target chrome & safari without disrupting IE7-8 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #myBackground {
        -khtml-opacity:.50; 
        opacity:.50;
    }
}
/* target firefox without disrupting IE */
@-moz-document url-prefix() {
    #myBackground {
        -moz-opacity:.50;
        opacity:0.5;
    }
}
/* and IE last so it doesn't blow up */
#myBackground {
    opacity:.50;
    filter:alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}

ฉันอาจมีความซ้ำซ้อนในรหัสข้างต้น - ถ้าใครอยากจะทำความสะอาดมันต่อไปรู้สึกฟรี!

หากคุณต้องตั้งค่าความทึบให้กับสัญลักษณ์แสดงหัวข้อย่อยทำไมคุณไม่ตั้งช่องอัลฟาลงในภาพโดยตรง โดยวิธีการที่ฉันไม่คิดว่ามีวิธีการตั้งค่าความทึบเป็นภาพพื้นหลังผ่าน CSS โดยไม่เปลี่ยนความทึบขององค์ประกอบทั้งหมด (และเด็ก ๆ ด้วย)

เพียงเพิ่มลงไปข้างบน .. คุณสามารถใช้ช่องอัลฟากับคุณสมบัติสีใหม่เช่น rgba (0,0,0,0) โอเคดังนั้นนี่คือสีดำ แต่มีความทึบศูนย์ดังนั้นในฐานะผู้ปกครองมันจะไม่ส่งผลกระทบต่อเด็ก ใช้งานได้กับ Chrome, FF, Safari และ .... ฉันผอมมาก O

แปลงสีฐานสิบหกของคุณเป็น RGBA

ฉันพบการสอนที่ดีและเรียบง่ายเกี่ยวกับปัญหานี้ ฉันคิดว่ามันใช้งานได้ดี (และแม้ว่าจะรองรับ IE ฉันแค่บอกให้ลูกค้าของฉันใช้เบราว์เซอร์อื่น):

ความโปร่งใสของพื้นหลัง CSS โดยไม่กระทบต่อองค์ประกอบลูกผ่าน RGBa และตัวกรอง

จากตรงนั้นคุณสามารถเพิ่มการรองรับการไล่ระดับสีเป็นต้น

#footer ul li
     {
       position:relative;
       list-style:none;
     }
    #footer ul li:before
     {
       background-image: url(imagesFolder/bg_demo.png);
       background-repeat:no-repeat;
       content: "";
       top: 5px;
       left: -10px;
       bottom: 0;
       right: 0;
       position: absolute;
       z-index: -1;
       opacity: 0.5;
    }

คุณสามารถลองรหัสนี้ ฉันคิดว่ามันจะทำงาน คุณสามารถเยี่ยมชมการสาธิต