Làm cách nào để cung cấp cho văn bản hoặc hình ảnh một nền trong suốt bằng CSS?

2283

Có thể, chỉ sử dụng CSS, để làm cho backgroundphần tử bán trong suốt nhưng có nội dung (văn bản & hình ảnh) của phần tử mờ không?

Tôi muốn thực hiện điều này mà không có văn bản và nền là hai yếu tố riêng biệt.

Khi thử:

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>
Mở rộng đoạn trích

Có vẻ như các yếu tố con phải chịu sự mờ đục của cha mẹ chúng, vì vậy opacity:1có liên quan đến opacity:0.6cha mẹ.

html  css  opacity 
— Sanders Stijn
nguồn
16
Đáng buồn thay, CSS3 đang nhắm mục tiêu sửa lỗi này với mô-đun màu mới, nó sẽ cho phép bạn chỉ định giá trị alpha bất cứ khi nào bạn nêu màu. w3.org/TR/css3-color
— meandmycode
71
Trên thực tế, độ mờ của các phần tử con được nhân với độ mờ của phần tử cha, không bị ghi đè. Vì vậy, ví dụ nếu pđộ mờ đục là .6và spanđộ mờ đục .5thì độ mờ thực sự của văn bản trong khoảng đó sẽ là 0.3.
— chharvey
1
Đoán như vậy, nhưng vì đó là nền mờ, bạn thậm chí không cần bộ lọc / độ mờ: codepen.io/anon/pen/ksJug
— Stijn Sanders
5
@chharvey điều gì sẽ xảy ra nếu tôi xác định opacity:.5cho cha mẹ và opacity:2cho phần tử con?
— Alexander
10
@Alexander, tôi rất vui vì bạn đã hỏi câu hỏi đó. Về mặt toán học, người ta sẽ nghi ngờ đứa trẻ sẽ trở về một opacity là 1. Tuy nhiên, opacity:2;là CSS hợp lệ . Giá trị của opacitytài sản phải nằm trong phạm vi bao gồm [0,1].
— chharvey

Câu trả lời:

2276

Sử dụng hình ảnh PNG bán trong suốt hoặc sử dụng CSS 3:

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

Đây là một bài viết từ css3.info, Opacity, RGBA và thỏa hiệp (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>
Mở rộng đoạn trích

— Peter Mortensen
nguồn
86
Có thể làm điều này với màu hex? Giống như #fff?
— grm
35
@grm: W3C đã xem xét giới thiệu định dạng mã hex #RRGGBBAA, nhưng họ đã quyết định không (vì nhiều lý do), vì vậy chúng tôi không thể.
— outis
95
@grm với SASS Bạn có thể,background-color: rgba(#000, .5);
— Jürgen Paul
2
Đáng để chỉ ra rằng nếu bạn muốn sử dụng độ trong suốt, mọi trình duyệt hỗ trợ RGBA cũng hỗ trợ HSLA , đây là một ánh xạ màu trực quan hơn nhiều. IE8 là trình duyệt giả duy nhất không hỗ trợ nó, vì vậy hãy chặn trước và sử dụng HSL (A) cho mỗi màu.
— iono
19
— BoltClock
476

Trong Firefox 3 và Safari 3, bạn có thể sử dụng RGBA như Georg Schölly đã đề cập .

Một mẹo ít được biết đến là bạn có thể sử dụng nó trong Internet Explorer cũng như sử dụng bộ lọc gradient.

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

Số hex đầu tiên xác định giá trị alpha của màu.

Giải pháp đầy đủ cho tất cả các trình duyệt:

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

Đây là từ độ trong suốt của nền CSS mà không ảnh hưởng đến các phần tử con, thông qua RGBa và các bộ lọc .

Ảnh chụp màn hình bằng chứng về kết quả:

Đây là khi sử dụng mã sau đây: 

 <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

— Adrien Be
nguồn
1
Nhưng không phải trong IE8. Tôi đã thử các cú pháp -ms-bộ lọc mới nhưng nó vẫn không làm việc cho tôi :(
— philfreo
5
Bài đăng này cho thấy cách thực hiện trong IE8: robertnyman.com/2010/01/11/ trên
— Slapout
14
@philfreo: Nếu bạn thay đổi bit đầu tiên của mã Sebastian thành "nền: rgb (0, 0, 0) trong suốt;" bây giờ nó sẽ hoạt động trong IE8. Điều này đã làm phiền tôi khá lâu!
— Tom Chantler
bộ lọc: progid Hoạt động tuyệt vời với IE 9. màu sắc là: trong suốt, đỏ, xanh lục, xanh lam - tất cả các giá trị hex hai chữ số.
— Thorsten Niehues
1
@AdrienBe - Tôi đã chỉnh sửa câu trả lời của bạn theo hướng dẫn của bạn. Thật không may, tôi đã ra khỏi không gian của câu hỏi và trả lời cụ thể này một thời gian, vì vậy tôi không thể thêm vào cuộc trò chuyện này vào lúc này.
— dùng664833
108

Đây là giải pháp tốt nhất tôi có thể đưa ra, KHÔNG sử dụng CSS 3. Và nó hoạt động rất tốt trên Firefox, Chrome và Internet Explorer theo như tôi có thể thấy.

Đặt một thùng chứa divvà hai con divở cùng cấp độ, một cho nội dung, một cho nền. Và sử dụng CSS, tự động kích thước nền để phù hợp với nội dung và đặt nền thực sự ở phía sau bằng 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>
Mở rộng đoạn trích

— Gorkem Pacaci
nguồn
19
Ông nói "Không tách rời văn bản và nền trong hai yếu tố nằm trên nhau.". Dù sao cũng cảm ơn, đây là một sửa chữa tốt và hữu ích, nhưng trong một số trường hợp, bạn muốn phần tử mờ đục là một phần tử con trong suốt.
— Rolf
Tôi đã trả lời khá giống nhau về một câu hỏi SO khác nhưng đã thêm bằng chứng jsfiddle & ảnh chụp màn hình (IE7 +), xem tại đây nếu quan tâm stackoverflow.com/a/21984546/759452
— Adrien Be
@Gorkem Pacaci: Đảm bảo các thuộc tính độ mờ là "trình duyệt chéo" thực sự, bạn có thể sử dụng đoạn mã này từ CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity
— Adrien Be
Tại sao không làm điều đó với một yếu tố giả như :aftervà tránh đánh dấu thêm?
— AndFisher
64

Đối với màu nền bán trong suốt đơn giản, các giải pháp trên (hình ảnh CSS3 hoặc bg) là các tùy chọn tốt nhất. Tuy nhiên, nếu bạn muốn làm một cái gì đó fancier (ví dụ: hoạt hình, nhiều nền, v.v.) hoặc nếu bạn không muốn dựa vào CSS3, bạn có thể thử kỹ thuật khung pane

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

Kỹ thuật này hoạt động bằng cách sử dụng hai lớp trên mạng của phần tử khung bên ngoài:

  • một (các back back của) phù hợp với kích thước của phần tử khung mà không ảnh hưởng đến luồng nội dung,
  • và một (các cont contv) có chứa nội dung và giúp xác định kích thước của khung.

Khung position: relativetrên là quan trọng; Nó nói với lớp trở lại để phù hợp với kích thước của khung. (Nếu bạn cần <p>thẻ là tuyệt đối, hãy thay đổi khung từ a <p>sang a <span>và bọc tất cả những thứ đó ở một vị trí tuyệt đối<p> thẻ .)

Ưu điểm chính của kỹ thuật này so với các công cụ tương tự được liệt kê ở trên là khung không phải có kích thước xác định; như được mã hóa ở trên, nó sẽ phù hợp với toàn bộ chiều rộng (bố cục phần tử khối thông thường) và chỉ cao bằng nội dung. Phần tử khung bên ngoài có thể được định kích thước theo bất kỳ cách nào bạn muốn, miễn là hình chữ nhật đó (tức là khối nội tuyến sẽ hoạt động; nội tuyến cũ đơn giản sẽ không).

Ngoài ra, nó cung cấp cho bạn rất nhiều tự do cho nền; Bạn có thể đặt bất kỳ thứ gì vào phần tử phía sau và không ảnh hưởng đến luồng nội dung (nếu bạn muốn có nhiều lớp con kích thước đầy đủ, chỉ cần đảm bảo rằng chúng cũng có vị trí: tuyệt đối, chiều rộng / chiều cao: 100%, và trên / dưới / trái / phải: tự động).

Một biến thể để cho phép điều chỉnh chèn nền (thông qua đỉnh / đáy / trái / phải) và / hoặc ghim nền (thông qua việc xóa một trong các cặp trái / phải hoặc trên / dưới) là sử dụng CSS sau:

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

Như đã viết, điều này hoạt động trong Firefox, Safari, Chrome, IE8 + và Opera, mặc dù IE7 và IE6 yêu cầu thêm CSS và biểu thức, IIRC và lần trước tôi đã kiểm tra, biến thể CSS thứ hai không hoạt động trong Opera.

Những điều cần chú ý:

  • Các phần tử nổi bên trong lớp cont sẽ không được chứa. Bạn sẽ cần đảm bảo rằng chúng được xóa hoặc có chứa, hoặc chúng sẽ trượt ra khỏi đáy.
  • Các lề đi trên phần tử khung và phần đệm đi trên phần tử cont. Không sử dụng ngược lại (lề trên cont hoặc phần đệm trên khung) hoặc bạn sẽ phát hiện ra những điều kỳ lạ như trang luôn rộng hơn một chút so với cửa sổ trình duyệt.
  • Như đã đề cập, toàn bộ điều cần phải là khối hoặc khối nội tuyến. Hãy sử dụng <div>s thay vì <span>s để đơn giản hóa CSS của bạn.

Một bản demo đầy đủ hơn, thể hiện sự linh hoạt của kỹ thuật này bằng cách sử dụng song song với display: inline-blockvà với cả auto& widths / s cụ thể 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>
Mở rộng đoạn trích

Và đây là bản demo trực tiếp về kỹ thuật đang được sử dụng rộng rãi:

ảnh chụp màn hình giáng sinh-card-2009.slippyd.com

— Slipp D. Thompson
nguồn
Trong tình huống nào người ta sẽ không muốn sử dụng CSS3 cho việc này?
— Burkely91
@ Burkely91 Nếu bạn có thể làm điều đó trong CSS3, thì hoàn toàn sử dụng nó. Nhưng nền CSS3 không hỗ trợ tất cả các loại nội dung cũng như bố cục đầy đủ linh hoạt. Ví dụ về phong bì / chữ cái ở trên sẽ khó có thể thực hiện được với CSS3 do các cạnh lặp lại độc lập và (các) điền trung tâm. Ngoài ra, hãy nhớ rằng câu trả lời này ban đầu được viết cách đây 5 năm, trước khi hỗ trợ CSS3 được phổ biến rộng rãi.
— Slipp D. Thompson
2
@Igor Ivancha Phục hồi các thay đổi của bạn. Tôi xin lỗi, việc thay đổi thụt lề từ biểu mẫu ưa thích của tôi (tab) sang của bạn (2 dấu cách) là không hay. Bạn có thể có lý do chính đáng để sử dụng thụt lề 2 không gian trong các dự án mã hàng ngày của mình, nhưng để trình bày trên web tôi tin rằng các tab có win win rõ ràng, việc thụt sâu hơn giúp dễ dàng phân biệt các mức phân cấp hơn và nó còn xa dễ dàng hơn để chuyển đổi các tab thành không gian một cách đáng tin cậy và do đó là một hình thức tương thích hơn của tất cả các độc giả.
— Slipp D. Thompson
@Igor Ivancha Ngoài ra, có vẻ như bạn đã chạy mã mặc dù một trình làm đẹp đặt mọi bộ chọn CSS và thuộc tính trên dòng riêng của nó. Các ví dụ của tôi được viết với các ngắt dòng có chủ ý và khoảng cách đến các phần nhóm hợp lý nên được người đọc hiểu cùng nhau, ví dụ: hầu hết các thuộc tính width:& height:chia sẻ một dòng bởi vì chúng cùng loại và được hiểu là hình dạng 2 chiều, không phải là hình dạng 2 chiều, không phải một cặp ràng buộc 1 chiều. Hơn nữa, một số dòng có số lượng khá lớn được đóng gói bởi vì nội dung được lặp đi lặp lại không quan trọng lắm để thể hiện.
— Slipp D. Thompson
@Igor Ivancha Tổ chức logic, nhóm, và kiểu dáng là cực kỳ quan trọng để viết lành mạnh, mã dễ hiểu, giống như với tất cả các loại văn bản. Những thay đổi bạn đã thực hiện tương đương với việc đăng bài của ai đó và xóa tất cả các ngắt đoạn và đặt một dòng mới bắt buộc sau mỗi câu. Nếu bạn muốn trở thành người tầm thường trong công việc của mình, tốt thôi, bạn có thể tự do làm điều đó. Nhưng làm ơn đừng làm giảm tính cách và biểu hiện ngữ nghĩa trong công việc của người khác.
— Slipp D. Thompson
58

Tốt hơn là sử dụng bán trong suốt.png .

Chỉ cần mở Photoshop , tạo 2x2hình ảnh pixel ( chọn 1x1có thể gây ra lỗi Internet Explorer! ), Tô màu nó bằng màu xanh lục và đặt độ mờ trong "tab Lớp" thành 60%. Sau đó lưu nó và làm cho nó một hình ảnh nền:

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

Nó hoạt động rất tuyệt, tất nhiên, ngoại trừ trong Internet Explorer 6 đáng yêu . Có nhiều bản sửa lỗi tốt hơn, nhưng đây là một bản hack nhanh:

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
— cộng đồng
nguồn
54

Có một mẹo để giảm thiểu đánh dấu: Sử dụng phần tử giả làm nền và bạn có thể đặt độ mờ cho nó mà không ảnh hưởng đến phần tử chính và các phần tử con của nó:

BẢN GIỚI THIỆU

Đầu ra:

Độ mờ nền với phần tử giả

Mã liên quan:

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>
Mở rộng đoạn trích

Hỗ trợ trình duyệt là Internet Explorer 8 trở lên.

— web-tiki
nguồn
23

Phương pháp đơn giản nhất là sử dụng hình ảnh PNG nền trong suốt .

Bạn có thể sử dụng JavaScript để làm cho nó hoạt động trong Internet Explorer 6 nếu bạn cần.

Tôi sử dụng phương pháp được nêu trong PNG trong suốt trong Internet Explorer 6 .

Ngoài ra, bạn có thể giả mạo nó bằng cách sử dụng hai yếu tố anh chị em bên cạnh - tạo một bán trong suốt , sau đó đặt vị trí kia ở trên cùng .

— Chris
nguồn
2
Tất cả những gì tôi cần là một màu nền đơn giản, kích thước của PNG mà bạn sẽ đề xuất tôi tạo ra với màu này? 1x1 sẽ khiến việc kết xuất thực hiện rất nhiều công việc, quá nhiều pixel làm cho PNG này trở nên khá lớn (nên có kích thước tệp ok vì được nén, nhưng vẫn cần kết xuất để giải nén nó để sử dụng nó) ...
— Stijn Sanders
3
Tôi muốn giới thiệu một cái gì đó như 30px x 30px, sử dụng ít bộ nhớ hơn khi hiển thị nó lặp lại so với 1x1 và vẫn đủ nhỏ để giảm thiểu việc sử dụng băng thông.
— Chris
21

Phương pháp này cho phép bạn có một hình ảnh trong nền và không chỉ có một màu đơn sắc, và có thể được sử dụng để có độ trong suốt trên các thuộc tính khác như viền. Không có hình ảnh PNG trong suốt được yêu cầu.

Sử dụng :before(hoặc :after) trong CSS và cung cấp cho chúng giá trị độ mờ để giữ phần tử ở độ mờ ban đầu. Do đó, bạn có thể sử dụng: trước để tạo thành phần tử giả và đặt cho nó nền trong suốt (hoặc viền) mà bạn muốn và di chuyển nó phía sau nội dung bạn muốn giữ mờz-index .

Một ví dụ ( fiddle ) (lưu ý rằng DIVvới lớp dadchỉ là để cung cấp một số bối cảnh và độ tương phản với màu sắc, phần tử bổ sung này thực sự không cần thiết, và hình chữ nhật màu đỏ được di chuyển xuống một chút và bên phải để nhìn thấy hậu cảnh phía sau các fancyBgphần tử):

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

với CSS này:

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

Trong trường hợp .fancyBg:beforenày có các thuộc tính CSS mà bạn muốn có độ trong suốt (nền đỏ trong ví dụ này, nhưng có thể là hình ảnh hoặc đường viền). Nó được định vị là tuyệt đối để di chuyển nó phía sau .fancyBg(sử dụng các giá trị bằng 0 hoặc bất cứ điều gì phù hợp hơn với nhu cầu của bạn).

— Frozenkoi
nguồn
17

Vấn đề là, văn bản thực sự có độ mờ hoàn toàn trong ví dụ của bạn. Nó có độ mờ hoàn toàn bên trong pthẻ, nhưng pthẻ chỉ bán trong suốt.

Bạn có thể thêm hình ảnh nền PNG bán trong suốt thay vì nhận ra nó bằng CSS, hoặc tách văn bản và div thành hai thành phần và di chuyển văn bản qua hộp (ví dụ: lề âm).

Nếu không thì sẽ không thể.

Giống như Chris đã đề cập: nếu bạn sử dụng tệp PNG có độ trong suốt, bạn phải sử dụng một cách giải quyết JavaScript để làm cho nó hoạt động trong Internet Explorer phiền phức ...

— SvenFinke
nguồn
15

Hầu như tất cả các câu trả lời giả định rằng nhà thiết kế muốn có một nền màu vững chắc. Nếu nhà thiết kế thực sự muốn có một bức ảnh làm nền thì giải pháp thực sự duy nhất tại thời điểm này là JavaScript giống như plugin jQuery Transify được đề cập ở nơi khác .

Những gì chúng ta cần làm là tham gia thảo luận nhóm làm việc CSS và làm cho chúng cung cấp cho chúng ta một thuộc tính độ mờ nền! Nó nên hoạt động song song với tính năng đa nền.

— thinsoldier
nguồn
14

Đây là cách tôi làm điều này (nó có thể không tối ưu, nhưng nó hoạt động):

Tạo cái divmà bạn muốn bán trong suốt. Cung cấp cho nó một lớp / id. Để trống , và đóng nó. Đặt cho nó một chiều cao và chiều rộng được đặt (giả sử, 300 pixel x 300 pixel). Cung cấp cho nó độ mờ 0,5 hoặc bất cứ điều gì bạn thích, và màu nền.

Sau đó, ngay bên dưới div đó, tạo một div khác với một lớp / id khác. Tạo một đoạn bên trong nó, nơi bạn sẽ đặt văn bản của bạn. Đưa ra divvị trí: tương đối và trên cùng: -295px(đó là âm 295 pixel). Đặt cho nó một chỉ số z là 2 cho số đo tốt và đảm bảo độ mờ của nó là 1. Tạo kiểu cho đoạn văn của bạn như bạn muốn, nhưng đảm bảo kích thước nhỏ hơn kích thước đầu tiên divđể nó không bị tràn.

Đó là nó. Đây là mã:

.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>
Mở rộng đoạn trích

Điều này hoạt động trong Safari 2.x, nhưng tôi không biết về Internet Explorer.

— paris ionescu
nguồn
Phần tử phụ có thể tránh được và thay vào đó sử dụng phần tử giả như :beforehoặc:after
— Frozenkoi
12

Đây là một plugin jQuery sẽ xử lý mọi thứ cho bạn, Transify ( Transify - một plugin jQuery để dễ dàng áp dụng độ trong suốt / độ mờ cho nền của một phần tử ).

Tôi đã gặp phải vấn đề này mọi lúc, vì vậy tôi quyết định viết một cái gì đó sẽ làm cho cuộc sống dễ dàng hơn nhiều. Kịch bản nhỏ hơn 2 KB và nó chỉ yêu cầu một dòng mã để làm cho nó hoạt động, và nó cũng sẽ xử lý hoạt hình độ mờ của nền nếu bạn muốn.

— joren
nguồn
11

Một thời gian trước, tôi đã viết về điều này trong Minh bạch nền trình duyệt chéo với CSS .

Kỳ lạ Internet Explorer 6 sẽ cho phép bạn làm cho nền trong suốt và giữ cho văn bản trên đầu hoàn toàn mờ đục. Đối với các trình duyệt khác, sau đó tôi đề nghị sử dụng tệp PNG trong suốt.

— triết lý
nguồn
9

Nếu bạn là một người Photoshop , bạn cũng có thể sử dụng:

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

Hoặc là:

#some-element {
  background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
— suraj rawat
nguồn
8

Để làm nền của phần tử bán trong suốt, nhưng có nội dung (văn bản & hình ảnh) của phần tử mờ, bạn cần viết mã CSS cho hình ảnh đó và bạn phải thêm một thuộc tính được gọi opacityvới giá trị tối thiểu.

Ví dụ,

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

// Giá trị càng nhỏ, nó sẽ càng trong suốt, quặng càng ít giá trị sẽ càng trong suốt.

— Pushp Singh
nguồn
Đây là một cách để làm điều đó trong các trình duyệt hiện đại. Tôi kết hợp nó với các giá trị rgba như một dự phòng
— Tahir Khalid
Vâng chính xác. Đây là một trong những cách để đối phó với trình duyệt hiện đại.
— Pushp Singh
Bạn có ý nghĩa gì bởi "quặng giá trị ít hơn sẽ là minh bạch" (có vẻ như không thể hiểu được)? (Trả lời bằng cách chỉnh sửa câu trả lời của bạn , không phải ở đây trong các bình luận, nếu thích hợp.)
— Peter Mortensen
7

CSS 3 có một giải pháp dễ dàng cho vấn đề của bạn. Sử dụng:

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

Ở đây, rgbalà viết tắt của giá trị đỏ, xanh lá cây, xanh dương và alpha. Giá trị màu xanh lá cây thu được do độ trong suốt 255 và một nửa được lấy bằng giá trị 0,5 alpha.

— Touhid Rahman
nguồn
Điều này khác với một số câu trả lời trước đó như thế nào?
— Peter Mortensen
6

Nếu bạn đang sử dụng Ít hơn , bạn có thể sử dụng fade(color, 30%).

— alex
nguồn
6

màu nền: rgba (255, 0, 0, 0,5); như đã đề cập ở trên là câu trả lời tốt nhất chỉ đơn giản là đặt. Để nói rằng sử dụng CSS 3, ngay cả trong năm 2013, không đơn giản vì mức độ hỗ trợ từ các trình duyệt khác nhau thay đổi theo mỗi lần lặp.

Trong khi background-color được hỗ trợ bởi tất cả các trình duyệt chính (không phải mới đối với CSS 3) [1] độ trong suốt alpha có thể khó khăn, đặc biệt là với Internet Explorer trước phiên bản 9 và với màu viền trên Safari trước phiên bản 5.1. [2]

Sử dụng một cái gì đó như La bàn hoặc SASS thực sự có thể giúp sản xuất và tương thích đa nền tảng.

[1] W3Schools: Thuộc tính màu nền CSS

[2] Blog của Norman: Danh sách kiểm tra hỗ trợ trình duyệt CSS3 (tháng 10 năm 2012)

— Sẽ Ni Ni
nguồn
4

Bạn có thể giải quyết vấn đề này cho Internet Explorer 8 bằng cách sử dụng cú pháp gradient. Định dạng màu là ARGB. Nếu bạn đang sử dụng bộ tiền xử lý Sass, bạn có thể chuyển đổi màu bằng cách sử dụng hàm tích hợp "eg-hex-str ()".

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

Bạn có thể sử dụng CSS 3 thuần túy : rgba(red, green, blue, alpha), alphamức độ trong suốt mà bạn muốn. Không cần JavaScript hay jQuery.

Đây là một ví dụ:

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
— Peter Mortensen
nguồn
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/ ?

— tiền tố
nguồn
2

Bạn có thể làm điều đó bằng rgba color codecách sử dụng CSS như ví dụ này được đưa ra dưới đây.

.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>
Mở rộng đoạn trích

— Rudra
nguồn
1

Có một giải pháp dễ dàng hơn để đặt một lớp phủ lên một hình ảnh trên cùng một div. Đây không phải là cách sử dụng đúng công cụ này. Nhưng hoạt động như một cơ duyên để tạo lớp phủ đó bằng CSS.

Sử dụng một bóng trong như thế này:

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

Đó là tất cả :)

— edd2110
nguồn
1

Bạn có thể sử dụng RGBA (red, green, blue, alpha) trong CSS . Một cái gì đó như thế này:

Vì vậy, chỉ cần làm một cái gì đó như thế này sẽ làm việc trong trường hợp của bạn:

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

span {
  color: white;
}
— Alireza
nguồn
1

Theo quan điểm của tôi, cách tốt nhất để sử dụng màu nền với độ mờ là như dưới đây. Nếu chúng ta sử dụng điều này, thì chúng ta sẽ không mất độ mờ cho các yếu tố khác, như màu thử nghiệm, đường viền, v.v.

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

Sử dụng màu nền với độ mờ

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

Nhập mô tả hình ảnh ở đây

— Vinod Kumar
nguồn
0

Tôi thường sử dụng lớp học này cho công việc của tôi. Nó khá tốt.

.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 */
}
Mở rộng đoạn trích

— Cengkuru Michael
nguồn
0

Nó hoạt động với tôi khi sử dụng định dạng #AARRGGBBnên cái làm việc cho tôi là #1C00ff00. Hãy thử xem, vì tôi đã thấy nó hoạt động cho một số người và không làm việc cho người khác. Tôi đang sử dụng nó trong CSS.

— Donald Shahini
nguồn
0

Bạn có thể sử dụng giá trị độ mờ được gắn vào giá trị thập lục phân:

background-color: #11ffeeaa;

Trong ví dụ aanày là độ mờ đục. Độ mờ đục 00có nghĩa là trong suốt và ffcó nghĩa là màu rắn.

Độ mờ là tùy chọn, vì vậy bạn có thể sử dụng giá trị thập lục phân như mọi khi:

background-color: #11ffee;

Bạn cũng có thể sử dụng cách cũ với rgba():

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

Và tốc backgroundký nếu bạn muốn đảm bảo rằng nền không có kiểu khác, như hình ảnh hoặc độ dốc:

background: #11ffeeaa;

Từ thông số kỹ thuật của 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
nguồn
-2

Bạn có thể sử dụng màu RGB với độ mờ như mã màu trong RGB (63, 245, 0) và thêm độ mờ (như 63, 245, 0, 0.5) và cũng thay thế RGB bằng RGBA. Asẽ được sử dụng cho độ mờ đục.

div {
  background: rgba(63, 245, 0, 0.5);
}
Mở rộng đoạn trích

— Vijay Sharma
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.