Độ mờ của nền div mà không ảnh hưởng đến phần tử chứa trong IE 8?

Tôi muốn đặt Độ mờ của nền div mà không ảnh hưởng đến phần tử chứa trong IE 8. Có bất kỳ giải pháp nào và không trả lời để đặt 1 X 1 hình ảnh .png và đặt độ mờ của hình ảnh đó vì tôi đang sử dụng độ mờ động và quản trị viên màu có thể thay đổi cái đó

Tôi đã sử dụng nó nhưng không hoạt động trong IE 8

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

và

rgba(0,0,0,0.3)

cũng thế.

Các opacityphong cách ảnh hưởng đến toàn bộ phần tử và tất cả mọi thứ bên trong nó. Câu trả lời chính xác cho điều này là sử dụng màu nền rgba để thay thế.

CSS khá đơn giản:

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

... trong đó ba số đầu tiên là các giá trị đỏ, lục và lam cho màu nền của bạn và số thứ tư là giá trị kênh 'alpha', hoạt động giống như opacitygiá trị.

Xem trang này để biết thêm thông tin: http://css-tricks.com/rgba-browser-support/

Mặt trái, là điều này không hoạt động trong IE8 hoặc thấp hơn. Trang tôi đã liên kết ở trên cũng liệt kê một số trình duyệt khác mà nó không hoạt động, nhưng tất cả chúng đều rất cũ; tất cả các trình duyệt đang được sử dụng ngoại trừ IE6 / 7/8 sẽ hoạt động với màu rgba.

Tin tốt là bạn cũng có thể buộc IE làm việc với điều này bằng cách sử dụng một bản hack có tên là CSS3Pie . CSS3Pie bổ sung một số tính năng CSS3 hiện đại cho các phiên bản IE cũ hơn, bao gồm cả màu nền rgba.

Để sử dụng CSS3Pie cho hình nền, bạn cần thêm một -pie-backgroundkhai báo cụ thể vào CSS của mình, cũng như behaviorkiểu PIE , vì vậy, biểu định kiểu của bạn sẽ trông giống như sau:

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

Hy vọng rằng sẽ giúp.

[BIÊN TẬP]

Đối với những gì nó đáng giá, như những người khác đã đề cập, bạn có thể sử dụng filterphong cách của IE , với gradienttừ khóa. Giải pháp CSS3Pie thực sự sử dụng kỹ thuật tương tự này đằng sau hậu trường, nhưng loại bỏ việc bạn phải xử lý trực tiếp các bộ lọc của IE, vì vậy các bảng định kiểu của bạn sạch hơn nhiều. (nó cũng bổ sung một loạt các tính năng hay khác, nhưng điều đó không liên quan đến cuộc thảo luận này)

nó đơn giản chỉ bạn có làm là cho

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

& cho IE sử dụng bộ lọc này

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

bạn có thể tạo bộ lọc rgba của mình từ đây http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity trên phần tử mẹ đặt nó cho toàn bộ cây DOM con

Bạn thực sự không thể đặt độ mờ cho một số phần tử nhất định sẽ không phân chia thành các phần tử con. opacityTôi sợ đó không phải là cách CSS hoạt động.

Những gì bạn có thể làm là có hai phần tử anh em trong một vùng chứa và đặt vị trí của một phần tử trong suốt:

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

thì bạn phải đặt trong suốt position: absolute/relativeđể nội dung của nó sẽ được hiển thị trên nó.

rgba có thể làm trong suốt nền của nền màu

rgbathiết lập màu trên phần tử background-colortất nhiên sẽ hoạt động, nhưng nó sẽ hạn chế bạn chỉ sử dụng màu làm nền. Tôi sợ không có hình ảnh nào. Tất nhiên, bạn có thể sử dụng các gradient CSS3 nếu bạn cung cấp các màu dừng gradient trong rgba. Điều đó cũng hoạt động.

Nhưng hãy lưu ý rằng rgbacó thể không được hỗ trợ bởi các trình duyệt yêu cầu của bạn.

Chức năng hộp thoại phương thức không có cảnh báo

Nhưng nếu bạn đang theo đuổi một loại mặt nạ nào đó trên toàn bộ trang, điều này thường được thực hiện bằng cách thêm một phần riêng biệt divvới tập hợp các kiểu này:

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

Sau đó, khi bạn hiển thị nội dung, nó phải có một cao hơn z-index. Nhưng hai yếu tố này không liên quan đến anh em ruột thịt hay gì cả. Chúng chỉ được hiển thị như chúng phải như vậy. Cái này hơn cái kia.

Hãy thử đặt chỉ số z cao hơn trên phần tử được chứa.

Điều gì về cách tiếp cận này:

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

Có thể có một câu trả lời đơn giản hơn, hãy thử thêm bất kỳ màu nền nào bạn thích vào mã, như background-color: #fff;

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

Nó ảnh hưởng đến toàn bộ div con khi bạn sử dụng tính năng opacity với các vị trí khác với vị trí tuyệt đối. Vì vậy, một cách khác để đạt được điều đó là không đặt các div bên trong nhau và sau đó sử dụng vị trí tuyệt đối cho các div. Không sử dụng bất kỳ màu nền nào cho div trên.

Sử dụng RGBA hoặc nếu bạn mã hex thì thay đổi nó thành rgba. Không cần thực hiện một số css phần tử 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;

HOẶC LÀ

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