ความทึบของพื้นหลังของ div โดยไม่ส่งผลต่อองค์ประกอบที่มีอยู่ใน IE 8?

112

ฉันต้องการตั้งค่าความทึบของพื้นหลังของ div โดยไม่ส่งผลกระทบต่อองค์ประกอบที่มีอยู่ใน IE 8 มีวิธีแก้ปัญหาใด ๆ และไม่ตอบโจทย์ในการตั้งค่ารูปภาพ 1 X 1 .png และตั้งค่าความทึบของรูปภาพนั้นเนื่องจากฉันใช้ความทึบแบบไดนามิกและผู้ดูแลระบบสีสามารถเปลี่ยนแปลงได้ ที่

ฉันใช้มัน แต่ไม่ทำงานใน IE 8

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

และ

rgba(0,0,0,0.3)

ด้วย

css internet-explorer-8 opacity

— Govind Malviya
แหล่งที่มา

คุณไม่สามารถทำสิ่งนี้ได้ ความทึบของคุณสมบัติมีผลต่อเนื้อหาทั้งหมดขององค์ประกอบของคุณ (องค์ประกอบ html อื่น ๆ + ข้อความ) แต่ฉันไม่เข้าใจว่าทำไมคุณไม่ต้องการใช้ png คุณจะต้องเปลี่ยนภาพพร้อมกันคุณเปลี่ยน css (เพราะฉันคิดว่าคุณมี css ที่แตกต่างกันซึ่งผู้ดูแลระบบสามารถเปลี่ยนได้)

— Elorfin

@ คอรัม: คุณผิดแค่ไหน (เท่าที่ฉันเป็น) มันเป็นไปได้. ตรวจสอบโพสต์บล็อกนี้ robertnyman.com/2010/01/11/…ฉลาดเหลือเชื่อ.

— Robert Koritnik

เพิ่งโพสต์ที่นี่: < stackoverflow.com/a/11755175/1491212 > ฉันหวังว่าอาจช่วยได้!

— Armel Larcier

236

opacityสไตล์มีผลต่อองค์ประกอบทั้งหมดและทุกสิ่งที่อยู่ภายใน คำตอบที่ถูกต้องคือการใช้สีพื้นหลัง rgba แทน

CSS นั้นค่อนข้างง่าย:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... โดยที่ตัวเลขสามตัวแรกคือค่าสีแดงสีเขียวและสีน้ำเงินสำหรับสีพื้นหลังของคุณและตัวที่สี่คือค่าช่อง 'อัลฟา' ซึ่งทำงานในลักษณะเดียวกับopacityค่า

ดูข้อมูลเพิ่มเติมในหน้านี้: http://css-tricks.com/rgba-browser-support/

ข้อเสียคือมันใช้ไม่ได้ใน IE8 หรือต่ำกว่า หน้าฉันเชื่อมโยงด้านบนยังแสดงรายการเบราว์เซอร์อื่น ๆ อีกสองสามรายการที่ใช้งานไม่ได้ แต่ตอนนี้มันเก่ามากแล้ว เบราว์เซอร์ทั้งหมดที่ใช้งานอยู่ในปัจจุบันยกเว้น IE6 / 7/8 จะทำงานกับสี rgba

ข่าวดีก็คือที่คุณสามารถบังคับ IE ในการทำงานกับเรื่องนี้เป็นอย่างดีโดยใช้สับที่เรียกว่าCSS3Pie CSS3Pie เพิ่มคุณสมบัติ CSS3 ที่ทันสมัยจำนวนมากให้กับ IE เวอร์ชันเก่ารวมถึงสีพื้นหลัง rgba

ในการใช้ CSS3Pie สำหรับพื้นหลังคุณต้องเพิ่มการ-pie-backgroundประกาศเฉพาะใน CSS ของคุณเช่นเดียวกับbehaviorสไตล์PIE ดังนั้นสไตล์ชีตของคุณจะมีลักษณะดังนี้:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

หวังว่าจะช่วยได้

[แก้ไข]

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

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

1

! สดใส สิ่งนี้ช่วยฉันได้มาก

— Jordan Starrk

22

มันง่ายเพียงคุณทำคือการให้

background: rgba(0,0,0,0.3)

& สำหรับ IE ใช้ตัวกรองนี้

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

คุณสามารถสร้างตัวกรอง rgba ของคุณได้จากที่นี่http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

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

1

การไล่ระดับสีเกี่ยวข้องกับความทึบอย่างไร? : S

— Robert Koritnik

@ Robert Koritnik: ดูคำตอบนี้ในเวอร์ชันของฉันสำหรับคำอธิบายที่ดีขึ้น - stackoverflow.com/questions/5160419/…ยังที่นี่: stackoverflow.com/questions/4788564/…

— สามสิบdot

@robert เป็นตัวกรอง IE ตัวเดียวที่มีอยู่ในเว็บซึ่งให้ผลเช่นเดียวกับที่ rgba ให้ & ฉันไม่ใช่ผู้เชี่ยวชาญด้านตัวกรอง

— sandeep

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

— clairesuzy

1

ตัวกรอง @sandeep จะไม่ทำงานหากไม่มี hasLayout คุณอาจมีคุณสมบัติ hasLayout อื่นในโค้ดของคุณความกว้างอาจ? ฉันทำงานมือเดียว.. หักข้อมือของฉันด้วยเหตุนี้การตอบกลับช้าของฉัน แต่นี่คือjsfiddleพร้อมรหัส IE ที่เกี่ยวข้องในข้อคิดเห็นแบบมีเงื่อนไขเพื่อเปรียบเทียบสองวิธี

— clairesuzy

9

`opacity` ในองค์ประกอบหลักจะตั้งค่าสำหรับโครงสร้างย่อย DOM ทั้งหมด

คุณไม่สามารถตั้งค่าความทึบสำหรับองค์ประกอบบางอย่างที่จะไม่เรียงซ้อนไปยังลูกหลานได้เช่นกัน นั่นไม่ใช่วิธีการopacityทำงานของCSS ที่ฉันกลัว

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

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

จากนั้นคุณต้องตั้งค่าโปร่งใส position: absolute/relativeเพื่อให้เนื้อหาที่เป็นพี่น้องกันจะแสดงผลได้

`rgba` สามารถทำพื้นหลังโปร่งใสของพื้นหลังสี

rgbabackground-colorแน่นอนว่าการตั้งค่าสีตามความต้องการขององค์ประกอบแต่จะ จำกัด ให้คุณใช้สีเป็นพื้นหลังเท่านั้น ไม่มีภาพที่ฉันกลัว แน่นอนคุณสามารถใช้การไล่ระดับสี CSS3 ได้แม้ว่าคุณจะใส่สีหยุดไล่ระดับในrgba. ที่ใช้งานได้เช่นกัน

แต่โปรดทราบว่าrgbaเบราว์เซอร์ที่คุณต้องการอาจไม่รองรับ

การทำงานของกล่องโต้ตอบโมดอลที่ปราศจากการแจ้งเตือน

แต่ถ้าคุณต้องการมาสก์หน้าทั้งหมดโดยปกติแล้วจะทำได้โดยการเพิ่มdivชุดสไตล์แยกต่างหาก:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

จากนั้นเมื่อคุณแสดงเนื้อหาควรมีไฟล์z-index. แต่องค์ประกอบทั้งสองนี้ไม่เกี่ยวข้องกันในแง่พี่น้องหรืออะไรเลย พวกเขากำลังแสดงอย่างที่ควรจะเป็น หนึ่งในอีกด้านหนึ่ง

— Robert Koritnik
แหล่งที่มา

นี่คือคำตอบที่ถูกต้องใช้งานได้แม้กับ bg-images

— Botea Florin

2

ลองตั้งค่าดัชนี z ให้สูงขึ้นบนองค์ประกอบที่มีอยู่

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

1

แนวทางนี้มีอะไรบ้าง:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

ขยายข้อมูลโค้ด

— แดเนียล
แหล่งที่มา

0

อาจมีคำตอบที่ง่ายกว่านี้ให้ลองเพิ่มสีพื้นหลังที่คุณต้องการลงในโค้ดเช่นbackground-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

— Miguel Angel de la Marta
แหล่งที่มา

2

มันมีผลกับเนื้อหาด้วย!

— Germa Vinsmoke

0

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

— Armin Farah Al-Saada
แหล่งที่มา

0

ใช้ RGBA หรือถ้าคุณใช้รหัสฐานสิบหกให้เปลี่ยนเป็น rgba ไม่จำเป็นต้องทำcss องค์ประกอบ presoduบางอย่าง

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

หรือ

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;

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

ความทึบของพื้นหลังของ div โดยไม่ส่งผลต่อองค์ประกอบที่มีอยู่ใน IE 8?

opacity ในองค์ประกอบหลักจะตั้งค่าสำหรับโครงสร้างย่อย DOM ทั้งหมด

rgba สามารถทำพื้นหลังโปร่งใสของพื้นหลังสี

การทำงานของกล่องโต้ตอบโมดอลที่ปราศจากการแจ้งเตือน

`opacity` ในองค์ประกอบหลักจะตั้งค่าสำหรับโครงสร้างย่อย DOM ทั้งหมด

`rgba` สามารถทำพื้นหลังโปร่งใสของพื้นหลังสี