질문자 :Stijn Sanders
CSS만 사용하여 background 을 반투명하게 만들고 요소의 내용(텍스트 및 이미지)을 불투명하게 만드는 것이 가능합니까?
텍스트와 배경을 두 개의 별도 요소로 사용하지 않고 이 작업을 수행하고 싶습니다.
시도할 때:
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> 자식 요소가 부모의 불투명도에 영향을 받는 것처럼 보이므로 opacity:1 은 opacity:0.6 에 상대적입니다.
반투명 PNG 또는 SVG 이미지를 사용하거나 CSS를 사용하십시오.
background-color: rgba(255, 0, 0, 0.5);다음은 css3.info, Opacity, RGBA 및 타협 (2007-06-03)의 기사입니다.
<p style="background-color: rgba(255, 0, 0, 0.5);"> <span>Hello, World!</span> </p>Firefox 3 및 Safari 3에서는 Georg Schölly가 언급한 RGBA를 사용할 수 있습니다.
약간 알려진 트릭은 그래디언트 필터를 사용하여 Internet Explorer에서도 사용할 수 있다는 것입니다.
background-color: rgba(0, 255, 0, 0.5); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');첫 번째 16진수는 색상의 알파 값을 정의합니다.
전체 솔루션 모든 브라우저:
.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)"; }이것은 RGBa 및 필터를 통해 자식 요소에 영향을 주지 않고 CSS 배경 투명도에서 가져온 것 입니다.
다음 코드를 사용할 때입니다.
<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> 
이것은 CSS 3을 사용하지 않고 내가 생각해낼 수 있는 최고의 솔루션입니다. 그리고 내가 볼 수 있는 한 Firefox, Chrome 및 Internet Explorer에서 훌륭하게 작동합니다.
컨테이너 div 와 두 개의 자식 div 동일한 수준에 배치합니다. 하나는 콘텐츠용이고 하나는 배경용입니다. 그리고 CSS를 사용하여 콘텐츠에 맞게 배경 크기를 자동으로 조정하고 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>간단한 반투명 배경색의 경우 위의 솔루션(CSS3 또는 bg 이미지)이 최상의 옵션입니다. 그러나 더 멋진 작업(예: 애니메이션, 다중 배경 등)을 하고 싶거나 CSS3에 의존하고 싶지 않다면 "창 기법"을 시도할 수 있습니다.
.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>이 기술은 외부 창 요소 내부에 두 개의 "레이어"를 사용하여 작동합니다.
position: relative 창의 상대가 중요합니다. 창의 크기에 맞도록 백 레이어에 지시합니다. ( <p> 태그가 절대적이어야 하는 경우 창을 <p> 에서 <span> 하고 모든 항목을 절대 위치 <p> 태그로 래핑합니다.)
이 기술이 위에 나열된 유사한 기술에 비해 갖는 주요 이점은 창이 지정된 크기일 필요가 없다는 것입니다. 위에 코딩된 대로 전체 너비(일반 블록 요소 레이아웃)에 맞고 콘텐츠만큼만 높아집니다. 외부 창 요소는 직사각형이라면 원하는 대로 크기를 조정할 수 있습니다(즉, inline-block은 작동하지만 기존 인라인은 작동하지 않음).
또한 배경에 대한 많은 자유를 제공합니다. 뒤쪽 요소에 아무 것도 넣을 수 없고 콘텐츠 흐름에 영향을 미치지 않도록 할 수 있습니다(여러 개의 전체 크기 하위 레이어를 원하는 경우 위치: 절대, 너비/높이: 100% 및 위/아래/왼쪽/오른쪽: 자동).
배경 삽입 조정(상단/하단/왼쪽/오른쪽을 통해) 및/또는 배경 고정(왼쪽/오른쪽 또는 상단/하단 쌍 중 하나 제거를 통해)을 허용하는 한 가지 변형은 대신 다음 CSS를 사용하는 것입니다.
.pane > .back { position: absolute; width: auto; height: auto; top: 0px; bottom: 0px; left: 0px; right: 0px; }작성된 대로 이것은 Firefox, Safari, Chrome, IE8+ 및 Opera에서 작동하지만 IE7 및 IE6에는 추가 CSS 및 표현식, IIRC가 필요하고 마지막으로 확인한 두 번째 CSS 변형은 Opera에서 작동하지 않습니다.
주의할 사항:
<span> 대신 <div> 자유롭게 사용하십시오. display: inline-block auto 및 특정 width s/ min-height s와 함께 사용하여 이 기술의 유연성을 보여주는 완전한 데모:
.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>다음은 광범위하게 사용되는 기술 의 라이브 데모입니다.
.png 를 사용하는 것이 좋습니다 .
Photoshop을 열고 2x2 픽셀 이미지를 만들고 1x1 을 선택하면 Internet Explorer 버그가 발생할 수 있습니다! ) 녹색으로 채우고 "레이어 탭"에서 불투명도를 60%로 설정합니다. 그런 다음 저장하고 배경 이미지로 만듭니다.
<p style="background: url(green.png);">any text</p>물론 멋진 Internet Explorer 6을 제외하고는 멋지게 작동합니다. 더 나은 수정 사항이 있지만 여기에 빠른 해킹이 있습니다.
p { _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none'); }마크업을 최소화하는 트릭이 있습니다. 의사 요소 를 배경으로 사용하면 기본 요소와 그 자식 요소에 영향을 주지 않고 불투명도를 설정할 수 있습니다.
산출:
관련 코드:
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>브라우저 지원은 Internet Explorer 8 이상입니다.
가장 쉬운 방법은 반투명 배경 PNG 이미지 를 사용하는 것입니다.
필요한 경우 JavaScript를 사용하여 Internet Explorer 6 에서 작동하도록 할 수 있습니다.
Internet Explorer 6의 투명 PNG에 설명된 방법을 사용합니다.
그 외에 두 개의 나란히 있는 형제 요소를 사용하여 가짜로 만들 수 있습니다. 하나는 반투명 하게 만들고 다른 하나는 절대적으로 맨 위에 놓습니다 .
이 방법을 사용하면 단색뿐만 아니라 배경에 이미지를 가질 수 있으며 테두리와 같은 다른 속성에 투명도를 부여하는 데 사용할 수 있습니다. 투명 PNG 이미지가 필요하지 않습니다.
:before (또는 :after )를 사용하고 요소를 원래 불투명도로 유지하려면 불투명도 값을 지정합니다. 따라서 :before 를 사용하여 가짜 요소를 만들고 원하는 투명한 배경(또는 테두리)을 제공하고 z-index 하여 불투명하게 유지하려는 콘텐츠 뒤로 이동할 수 있습니다.
예( 바이올린 )( dad 클래스 DIV 는 색상에 대한 약간의 컨텍스트와 대비를 제공하기 위한 것입니다. 이 추가 요소는 실제로 필요하지 않으며 빨간색 사각형이 약간 아래로 이동하여 오른쪽으로 이동하여 표시됩니다. fancyBg 요소 뒤의 배경):
<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>이 CSS로:
.dad { background: lime; border: 1px double black; margin: 1ex 2ex; padding: 0.5ex; position: relative; -kz-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; } 이 경우 .fancyBg:before 에는 투명도와 함께 원하는 CSS 속성이 있습니다(이 예에서는 빨간색 배경이지만 이미지나 테두리가 될 수 있음). .fancyBg 뒤로 이동하기 위해 절대 위치에 배치됩니다(0 또는 필요에 더 적합한 값 사용).
문제는 텍스트가 실제로 예를 들어 전체 불투명도를 가지고있다. p 태그 내부는 완전히 불투명 p 태그는 반투명합니다.
CSS에서 인식하는 대신 반투명 PNG 배경 이미지를 추가하거나 텍스트와 div를 두 요소로 분리하고 텍스트를 상자 위로 이동할 수 있습니다(예: 음수 여백).
그렇지 않으면 불가능합니다.
Chris가 언급한 것처럼: 투명도가 있는 PNG 파일을 사용하는 경우 성가신 Internet Explorer에서 작동하도록 JavaScript 해결 방법을 사용해야 합니다...
거의 모든 답변은 디자이너가 단색 배경을 원한다고 가정합니다. 디자이너가 실제로 사진을 배경으로 사용하려는 경우 현재 유일한 실제 솔루션은 다른 곳에서 언급한 jQuery Transify 플러그인과 같은 JavaScript입니다.
우리가 해야 할 일은 CSS 작업 그룹 토론에 참여하고 그들이 우리에게 background-opacity 속성을 부여하도록 하는 것입니다! 다중 배경 기능과 함께 작동해야 합니다.
다음은 이 작업을 수행하는 방법입니다(최적은 아니지만 작동함).
반투명하게 하려는 div 를 만듭니다. 클래스/ID를 부여합니다. 이 비워두고 닫습니다. 높이와 너비를 설정하십시오(예: 300픽셀 x 300픽셀). 불투명도를 0.5 또는 원하는 대로 지정하고 배경색을 지정합니다.
그런 다음 해당 div 바로 아래 에 다른 클래스/ID로 다른 div를 만듭니다. 그 안에 텍스트를 배치할 단락을 만듭니다. div 위치: 상대 및 상단: -295px ( 음수 295픽셀)를 지정합니다. 적절한 측정을 위해 z-인덱스를 2로 지정하고 불투명도가 1인지 확인합니다. 원하는 대로 단락의 스타일을 지정하되 치수가 첫 번째 div 의 치수보다 작아서 넘치지 않도록 하십시오.
그게 다야 코드는 다음과 같습니다.
.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>이것은 Safari 2.x에서 작동하지만 Internet Explorer에 대해서는 모릅니다.
다음은 모든 것을 처리할 jQuery 플러그인인 Transify( Transify - 요소의 배경에 투명도/불투명도를 쉽게 적용하는 jQuery 플러그인 )입니다.
나는 때때로 이 문제에 직면했고, 그래서 나는 삶을 훨씬 더 쉽게 만들어 줄 무언가를 쓰기로 결정했습니다. 스크립트는 2KB 미만이며 작동하려면 한 줄의 코드만 필요하며 원하는 경우 배경의 불투명도 애니메이션도 처리합니다.
얼마 전에 CSS를 사용한 Cross Browser Background Transparency에서 이에 대해 썼습니다.
이상하게도 Internet Explorer 6을 사용하면 배경을 투명하게 만들고 맨 위의 텍스트를 완전히 불투명하게 유지할 수 있습니다. 다른 브라우저의 경우 투명 PNG 파일을 사용하는 것이 좋습니다.
배경의 불투명도는 텍스트 가 아닌 일부 아이디어가 있습니다. 반투명 이미지를 사용하거나 추가 요소를 오버레이합니다.
Photoshop 사용자라면 다음을 사용할 수도 있습니다.
#some-element { background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1** } #some-element { background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1** }요소의 배경을 반투명하게 하되 요소의 내용(텍스트 및 이미지)을 불투명하게 하려면 해당 이미지에 대한 CSS 코드를 작성해야 하며 opacity 라는 속성을 최소값으로 하나 추가해야 합니다.
예를 들어,
.image { position: relative; background-color: cyan; opacity: 0.7; }// 값이 작을수록 투명해지고, 값이 작을수록 투명해집니다.
CSS 3에는 문제에 대한 쉬운 솔루션이 있습니다. 사용하다:
background-color:rgba(0, 255, 0, 0.5); 여기서 rgba 는 빨강, 초록, 파랑, 알파 값을 나타냅니다. 255로 인해 녹색 값이 얻어지고 0.5 알파 값에 의해 절반 투명도가 얻어집니다.
Less 를 사용하는 경우 fade(color, 30%) 사용할 수 있습니다.
배경색: rgba(255, 0, 0, 0.5); 위에서 언급했듯이 가장 좋은 대답은 간단히 말해서입니다. 2013년에도 CSS 3을 사용한다는 것은 반복할 때마다 다양한 브라우저의 지원 수준이 변경되기 때문에 간단하지 않습니다.
background-color 는 모든 주요 브라우저에서 지원되지만(CSS 3의 새로운 기능은 아님) [1] 알파 투명도는 특히 버전 9 이전의 Internet Explorer와 버전 5.1 이전의 Safari의 테두리 색상에서 까다로울 수 있습니다. [2]
Compass 또는 SASS 와 같은 것을 사용하면 프로덕션 및 교차 플랫폼 호환성에 실제로 도움이 될 수 있습니다.
(ab) 그래디언트 구문을 사용하여 Internet Explorer 8에서 이 문제를 해결할 수 있습니다. 색상 형식은 ARGB입니다. Sass 전처리기를 사용하는 경우 내장 함수 "ie-hex-str()"을 사용하여 색상을 변환할 수 있습니다.
background: rgba(0,0,0, 0.5); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";순수 CSS 3 : rgba(red, green, blue, alpha) 를 사용할 수 있습니다. 여기서 alpha 는 원하는 투명도 수준입니다. JavaScript나 jQuery가 필요하지 않습니다.
다음은 예입니다.
#item-you-want-to-style{ background:rgba(192.233, 33, 0.5) }<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>아래에 주어진 이 예와 같이 CSS를 사용하여 rgba color code 수행할 수 있습니다.
.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>제 관점에서 배경색을 불투명하게 사용하는 가장 좋은 방법은 아래와 같습니다. 이것을 사용하면 테스트 색상, 테두리 등과 같은 다른 요소의 불투명도를 잃지 않습니다.
background-color: rgba(71, 158, 0, 0.8);불투명도가 있는 배경색 사용
background-color: rgba(R, G, B, Opacity); 
동일한 div의 이미지 위에 오버레이를 배치하는 더 쉬운 솔루션이 있습니다. 이 도구를 올바르게 사용하는 것은 아닙니다. 그러나 CSS를 사용하여 해당 오버레이를 만드는 매력처럼 작동합니다.
다음과 같이 삽입 그림자를 사용하십시오.
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);그게 다야 :)
CSS 에서 RGBA (red, green, blue, alpha) 를 사용할 수 있습니다. 이 같은:
따라서 간단히 다음과 같이 하면 귀하의 경우에 효과가 있을 것입니다.
p { position: absolute; background-color: rgba(0, 255, 0, 0.6); } span { color: white; }16진수 값에 추가된 불투명도 값을 사용할 수 있습니다.
background-color: #11ffeeaa; 이 예에서 aa 는 불투명도입니다. 불투명도 00 은 투명을 의미하고 ff 는 단색을 의미합니다.
불투명도는 선택 사항이므로 항상 16진수 값을 사용할 수 있습니다.
background-color: #11ffee; rgba() 와 함께 예전 방식을 사용할 수도 있습니다.
background-color: rgba(117, 190, 218, 0.5); background 이미지나 그라디언트와 같은 다른 스타일이 없는지 확인하려는 경우 배경 속기:
background: #11ffeeaa;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;나는 일반적으로 내 작업에 이 클래스를 사용합니다. 꽤 좋습니다.
.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 */ }#AARRGGBB 형식을 사용할 때 저에게 #1C00ff00 . 어떤 사람들에게는 효과가 있고 다른 사람에게는 효과가 없는 것을 보았기 때문에 시도해 보십시오. CSS에서 사용하고 있습니다.
이것은 원하는 결과를 제공합니다 -
body { background-image: url("\images\dark-cloud.jpg"); background-size: 100% 100%; background-attachment: fixed; opacity: .8; }배경의 불투명도를 설정합니다.
출처 : http:www.stackoverflow.com/questions/806000/how-do-i-give-text-or-an-image-a-transparent-background-using-css
| 브라우저 창의 div 높이를 100%로 만드는 방법 (0) | 2021.11.25 |
|---|---|
| Python 사전에서 키를 제거하려면 어떻게 해야 합니까? (0) | 2021.11.25 |
| 파이썬에서 문자열을 어떻게 소문자로 합니까? (0) | 2021.11.25 |
| 연산자 오버로딩에 대한 기본 규칙과 관용구는 무엇입니까? (0) | 2021.11.25 |
| 내 열거형 정의가 JavaScript에서 변경되지 않는다는 것을 어떻게 보장할 수 있습니까? (0) | 2021.11.24 |