Câu hỏi Làm thế nào để tôi cung cấp cho văn bản hoặc hình ảnh một nền trong suốt bằng cách sử dụng CSS?


Có thể, chỉ sử dụng CSS, để làm cho background của một 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ờ đục?

Tôi muốn thực hiện điều này mà không cần phải có văn bản và nền dưới dạng hai phần tử riêng biệt.

Khi cố gắng:

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>

Có vẻ như yếu tố con là tùy thuộc vào độ mờ đục của bố mẹ, vì vậy opacity:1 liên quan đến opacity:0.6 của phụ huynh.


1998
2018-04-30 09:00


gốc


Đáng buồn là không, CSS3 đang nhắm mục tiêu sửa lỗi này bằng 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
Trên thực tế, độ mờ của phần tử con là nhân lên bằng độ mờ của phần tử gốc, không bị ghi đè. Vì vậy, ví dụ nếu pOpacity là .6 và spanOpacity là .5 thì độ mờ thực của văn bản trong khoảng sẽ là 0.3. - chharvey
Đ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
@chharvey những gì được cho là sẽ xảy ra nếu tôi xác định opacity:.5 cho cha mẹ và opacity:2 cho phần tử con? - Alexander
@ Alexander, tôi vui vì bạn đã hỏi câu hỏi đó. Về mặt toán học, người ta nghi ngờ đứa trẻ sẽ trở lại với độ mờ đục của 1. Tuy nhiên, opacity:2; Là CSS không hợp lệ. Giá trị của opacity bất động sản phải nằm trong phạm vi bao gồm [0,1]. - chharvey


Các câu trả lời:


Hoặc sử dụng nửa công khai PNG hình ảnh hoặc sử dụng CSS3:

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


2115
2017-07-13 20:51



là nó có thể làm điều này với màu hex? Giống như #fff? - grm
@grm javascripter.net/faq/hextorgb.htm - kb.
@grm: W3C xem xét giới thiệu một đị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
@grm với SASS Bạn có thể, background-color: rgba(#000, .5); - Jürgen Paul
@ outis: Tin vui, #RRGGBBAA hiện ở cấp Màu 4. - BoltClock♦


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

Một mẹo nhỏ đượ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 đủ 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ừ Tính minh bạch 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:            

 <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


456
2018-04-30 20:42



Điều này dường như làm việc tuyệt vời trong cả IE6 và IE7 ... cảm ơn! - philfreo
Nhưng không phải trong IE8. Tôi đã thử cú pháp -ms-filter mới nhưng nó vẫn không làm việc cho tôi: ( - philfreo
Bài đăng này cho thấy cách thực hiện trong IE8:robertnyman.com/2010/01/11/… - Slapout
@philfreo: Nếu bạn thay đổi bit đầu tiên của mã của Sebastian thành "nền: rgb (0, 0, 0) trong suốt;" nó bây giờ sẽ hoạt động trong IE8. Điều này đã làm tôi thất vọng một thời gian! - Tom Chantler
@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. Rất tiếc, tôi đã không tham gia phần đầu của phần Giải Đáp đặc biệt 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. - user664833


Đâ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 tốt trên Firefox, Chrome và Internet Explorer như xa như tôi có thể nhìn thấy.

Đặt một hộp chứa DIV và hai DIV con ở cùng cấp, một cho nội dung, một cho nền. Và sử dụng CSS, tự động định kích thước nền để vừa với nội dung và đặt nền thực sự ở mặt sau bằng chỉ mục z.

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


97
2018-05-24 16:07



Anh ấy nói "Không tách văn bản và nền trong hai phần tử được đặt trên nhau." Cảm ơn anyway, đây là một sửa chữa tốt và rất hữu ích, nhưng trong một số trường hợp, bạn muốn các yếu tố đục là một đứa trẻ của một nửa trong suốt. - Rolf
Tôi trả lời khá nhiều giống nhau trên một câu hỏi SO nhưng thêm một chứng minh jsfiddle & ảnh chụp màn hình (IE7 +), xem ở đâ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ư :after và tránh đánh dấu thêm? - AndFisher


Tốt hơn nên sử dụng nửa công khai trong suốt .png.

Chỉ cần mở Photoshop, tạo một 2x2 hình ảnh pixel (hái 1x1 có thể gây ra lỗi Internet Explorer!), tô 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 nền:

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

Nó hoạt động mát mẻ, tất nhiên, ngoại trừ trong đáng yêu Internet Explorer 6. Có các 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');
}

54
2017-10-05 08:15



Bạn có thể dùng paint.net cũng thế. - Donny V.


Đối với màu nền bán trong suốt đơn giản, các giải pháp trên (CSS3 hoặc hình ảnh bg) là các tùy chọn tốt nhất. Tuy nhiên, muốn làm điều gì đó huyền ảo hơn (ví dụ: hoạt ảnh, nhiều hình 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 ngăn”:

.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" bên trong phần tử khung bên ngoài:

  • một ("trở lại") 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 ("cont") chứa nội dung và giúp xác định kích thước của cửa sổ.

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

Ưu điểm chính của kỹ thuật này có trên những cái tương tự được liệt kê ở trên là ngăn không phải là một kích thước được chỉ định; như được mã hóa ở trên, nó sẽ vừa với chiều rộng đầy đủ (bố cục phần tử khối bình 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 của nó (tức là khối nội tuyến sẽ hoạt động; nội dòng thuần túy 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 tự do đặ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 nhiều lớp con kích thước đầy đủ, chỉ cần đảm bảo chúng cũng có vị trí: tuyệt đối, chiều rộng / chiều cao: 100%, và trên cùng / dưới cùng / trái / phải: tự động).

Một biến thể để cho phép điều chỉnh inset nền (thông qua trên / dưới / trái / phải) và / hoặc ghim nền (bằng cách loại bỏ một trong các cặp trái / phải hoặc trên / dưới) là sử dụng CSS sau để thay thế:

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

Theo văn bản, đ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 cuối tôi kiểm tra, biến thể CSS thứ hai không hoạt động trong Opera.

Những điều cần lưu ý cho:

  • Các phần tử nổi bên trong lớp tiếp theo sẽ không được chứa. Bạn sẽ cần phải chắc chắn rằng chúng được xóa hoặc có chứa, hoặc họ sẽ trượt ra khỏi đáy.
  • Lề đi vào 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 đệm trên cửa sổ) hoặc bạn sẽ khám phá những điều kỳ quặc như trang luôn hơi rộng hơn cửa sổ trình duyệt.
  • Như đã đề cập, toàn bộ điều cần phải chặn hoặc chặn nội dòng. Cảm thấy tự do để 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 nó song song với display: inline-block, và với cả hai auto & riêng widthS/min-heightS:

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

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

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



Trong tình huống nào người ta không muốn sử dụng CSS3 cho điều này? - Burkely91
@ Burkely91 Nếu bạn có thể làm điều đó trong CSS3, sau đó hoàn toàn sử dụng điều đó. Nhưng CSS3 nền không hỗ trợ tất cả các loại nội dung cũng không đầy đủ bố trí flexibilty. Ví dụ về phong bì / thư ở trên sẽ khó có thể kéo ra bằng CSS3 vì các cạnh lặp lại độc lập và (các) 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
@Igor Ivancha Đã khôi phục các thay đổi của bạn. Tôi xin lỗi, thay đổi thụt đầu dòng từ biểu mẫu (tab) ưa thích của tôi thành của bạn (2 dấu cách) không phải là mát mẻ. Bạn có thể có lý do chính đáng để sử dụng thụt lề 2 dấu cách 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ó chiến thắng rõ ràng— sự thụt lề sâu hơn giúp dễ dàng phân biệt các cấp bậc và hơn thế nữa chuyển đổi các tab thành không gian dễ dàng hơn và do đó là một hình thức tương thích hơn của tất cả người đọc. - 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 vào 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ý cần được người đọc hiểu cùng nhau - ví dụ: phần lớn width: & height: các thuộc tính chia sẻ một dòng vì chúng là cùng một kiểu cấu trúc và được hiểu rõ hơn như một hình dạng 2 chiều, không phải là một cặp các ràng buộc 1 chiều. Hơn nữa, một số dòng có một số tiền hợp lý đóng gói vào chúng bởi vì nó lặp đi lặp lại nội dung đó không phải là tất cả những gì quan trọng để thể hiện. - Slipp D. Thompson
@Igor Ivancha Tổ chức hợp lý, nhóm và tạo kiểu là cực kỳ quan trọng để viết mã sane, dễ hiểu, cũng 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 chuyển sang bài đăng 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 một người khiếm nhã trong công việc của mình, bạn được tự do làm như vậy. Nhưng xin đừng câm lặng nhân vật ngữ nghĩa và biểu hiện trong tác phẩm của người khác. - Slipp D. Thompson


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 yếu tố chính và con của nó:

BẢN GIỚI THIỆU

Đầu ra:

Background opacity with a pseudo element

Mã có 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>

Hỗ trợ trình duyệt là Internet Explorer 8 và sau đó.


47
2018-01-14 00:14





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

Bạn có thể sử dụng JavaScript để làm cho nó hoạt động 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.

Khác hơn thế,

bạn có thể giả mạo nó bằng cách sử dụng two side-by-side sibling elements - chế tạo một nửa trong suốt, sau đó absolutely position the other over the top?


23
2018-04-30 09:14



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 bạn sẽ đề nghị tôi tạo ra với màu này? 1x1 sẽ làm cho rendering làm rất nhiều công việc, quá nhiều điểm ảnh làm cho PNG này khá lớn (nên được ok kích thước tập tin kể từ nén, nhưng vẫn rendering cần giải nén nó để sử dụng nó) ... - Stijn Sanders
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 kết xuất lặp lại so với 1x1 và vẫn đủ nhỏ để giảm thiểu mức sử dụng băng thông. - Chris


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

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

Một ví dụ (vĩ cầm) (lưu ý rằng DIV với lớp dad chỉ để cung cấp một số ngữ cảnh và độ tương phản với màu sắc, phần tử phụ 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à sang bên phải để lại có thể nhìn thấy nền phía sau fancyBgthành phần):

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


20
2018-01-26 16:36





Vấn đề là, văn bản thực sự có độ mờ đục đầy đủ trong ví dụ của bạn. Nó có độ mờ hoàn toàn bên trong p thẻ, nhưng p chỉ là nửa công khai.

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

Nếu không nó sẽ không thể.

CHỈNH SỬA:

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 giải pháp JavaScript để làm cho nó hoạt động trong Internet Explorer ...


14
2017-10-25 13:55