CSS 참조에서 이미지 투명도 를 설정하는 방법 과 배경 이미지를 설정하는 방법을 볼 수 있습니다 . 그러나 투명한 배경 이미지를 설정하기 위해이 두 가지를 어떻게 결합 할 수 있습니까?
배경으로 사용하고 싶은 이미지가 있지만 너무 밝습니다. 불투명도를 약 0.2로 낮추고 싶습니다. 어떻게해야합니까?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}동일한 속성에서 배경 이미지와 불투명도를 설정할 수 있습니까?
답변:
두 가지 방법 :
- PNG로 변환하여 원본 이미지를 0.2 불투명도로 만듭니다
- (더 나은 방법)
<div>은position: absolute;이전#main과 높이가 같고#main배경 이미지 및을 적용하십시오opacity: 0.2; filter: alpha(opacity=20);.
PNG에서 짜낼 수있는 것이 놀랍습니다. 예를 들어 0.2 불투명도에서는 많은 세부 정보를 선택하지 않을 것이므로 Indexed-PNG로 변환 할 수 있습니다. 나는 실제로 이것을 내 웹 사이트에서 사용하며 1920x1080 배경 이미지를 250kb 미만으로 축소합니다.
—
어둠의 절대자 니트
오버레이 위의 바닥을 사용할 수 있도록 z-index : -1을 해당 위치 : 절대에 추가하는 것이 좋습니다. 좋은 대답입니다.
—
Raz
WebP를 사용할 수도 있습니다. 투명도를 지원하고 파일 크기가 PNG보다 훨씬 작습니다. Safari를 제외한 모든 주요 브라우저는 이제 WebP를 지원합니다. WebP는 지원되는 브라우저에, PNG는 Safari에 지원할 수 있습니다.
—
Dan Roberts
#main {
position: relative;
}
#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
IE8부터 콘텐츠를 생성했습니다. caniuse.com/#feat=css-gencontent , IE8에 필터 속성을 사용하십시오. caniuse.com/#search=opacity
—
Dan Eastwell
CSS에 "z-index : -1"을 추가했습니다. 이런 식으로 배경 이미지는 #main
—
patrick
:before대신 대신 사용 하면 기본 내용 아래에 자동으로 표시 되므로 :after변조 할 필요가 없습니다 . (현재 Chrome 및 FF에서 테스트되었습니다.)z-index:before
@KajMagnus 그렇게하면 그 이후의 모든 내용이 표시되지 않습니다. 불투명도를 1.0으로 설정하면 무슨 뜻인지 알 수 있습니다.
—
제시카
반복되는 배경 이미지를 얻는 경우 #main : after {...}
—
금지 지오 엔지니어링
background-repeat: no-repeat; background-attachment: fixed; background-position: center; 내에 추가하거나 추가해야 할 수도 있습니다 .
1 div 및 투명한 이미지가없는 솔루션 :
다중 배경 CSS3 기능을 사용하고 두 개의 배경을 넣을 수 있습니다. 하나는 이미지가 있고 다른 하나는 투명 패널이 있습니다 (배경 이미지의 불투명도를 직접 설정할 방법이 없다고 생각합니다).
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;rgba(255,255,255,0.5)혼자서만 사용할 수 있기 때문에 사용할 수 없으므로이 예제에서는 각 브라우저마다 생성 된 그라디언트를 사용했습니다 (그래서 너무 길습니다). 그러나 개념은 다음과 같습니다.
background: tranparentColor, url("myImage");
배경이 단색 인 경우에만 작동합니다. 배경 인 PNG24가 있고 불투명도 (예를 들어 호버링)를 원하면 작동하지 않으며 의사 요소 방법을 사용해야합니다. IE 8 이상에서 사용할 수 있기 때문에 실제로 더 좋습니다.
—
vsync
간단한 솔루션
그라디언트를 배경 이미지 로만 설정해야하는 경우 :
background-image: url(IMAGE_URL); /* fallback for older browsers */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
이미지가 약간 위로 이동합니다. 수정이 있습니까?
—
HFR1994
RGBA 255,255,255 배경 이미지를 사용할 수도 있습니다.
—
로마
@Roman rgba 색상 구성 요소를 요소 또는 포함 부모에서 배경색으로 사용되는 값으로 설정할 수 있습니다 (Chrome 58.0.3029.81, Edge 38.14393.0.0에서 테스트).
—
collapsar
나는 이것을 보았고 CSS3에서는 이제 이와 같은 코드를 넣을 수 있습니다. 내가이 같은 일을 할 수있는 전체 배경을 덮고 싶다고합시다. 그런 다음 hsla(0,0%,100%,0.70)또는 rgba를 사용하면 원하는 모양을 얻기 위해 채도 또는 불투명도에 관계없이 흰색 배경을 사용합니다.
.body{
background-attachment: fixed;
background-image: url(../images/Store1.jpeg);
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: hsla(0,0%,100%,0.70);
background-blend-mode: overlay;
background-repeat: no-repeat;
}
배경색과 배경 블렌드 모드를 추가하면 속임수가되었습니다. 이제 아이들에게 영향을 미치지 않는 불투명도가있는 div가 있습니다!
—
디에고 빅토르 드 예수
대단해! 스크롤시 불투명도를 변경하는 jquery 함수를 작성하여 아래로 스크롤 할 때 배경 이미지 위에 색상을 만듭니다. $ (function () {$ (window) .scroll (function () {var scroll = $ (window) .scrollTop (); var current = 0; var now = (현재 스크롤) / 7; $ ( '. slide ') .css ('background-position ', '50 %'+ now + 'px'); var color = Math.round (scroll / 7) / 100; $ ( '. slide'). css ( 'background- color ','rgba (128, 45, 87, '+ color +') ');});});
—
drooh
이것을 달성하기 위해 CSS psuedo selector :: after를 사용할 수 있습니다. 다음은 실제 데모입니다.
.bg-container{
width: 100%;
height: 300px;
border: 1px solid #000;
position: relative;
}
.bg-container .content{
position: absolute;
z-index:999;
text-align: center;
width: 100%;
}
.bg-container::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index:-99;
background-image: url(https://i.stack.imgur.com/Hp53k.jpg);
background-size: cover;
opacity: 0.4;
}<div class="bg-container">
<div class="content">
<h1>Background Opacity 0.4</h1>
</div>
</div>@ Dan Eastwell의 답변을 사용했으며 매우 잘 작동합니다. 코드는 그의 코드와 비슷하지만 일부 추가되었습니다.
.granddata {
position: relative;
margin-left :0.5%;
margin-right :0.5%;
}
.granddata:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url("/Images/blabla.jpg");
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
background-repeat: no-repeat;
background-position: center;
background-attachment:fixed;
}간단한 이미지를 만드는 가장 좋은 방법은 CSS 만 사용하여 HTML 요소의 배경을 설정하는 것입니다.
HTML {
background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
width: 100%;
height: 100%;
}당신이 얻고 싶은 경우에 공상을 하고, 불투명도를 설정 한 다음, IE9에서 + *, 당신은 신체의 투명한 배경 색상을 설정할 수 있습니다. 반투명 흰색을 오버레이하여 이미지를 더 희게 만들고 더 밝게 보이게합니다. 예를 들어 불투명도가 75 % 인 흰색 ( rgba(255,255,255,.75))은 다음과 같은 효과를 나타냅니다.
HTML {
background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: rgba(255, 255, 255, .75);
}<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing.
Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus.
Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla
et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos,
massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl
nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet
porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris
purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum
lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient,
imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>- 팁 :
position: relative본문이있는 동안 HTML의 상태를 확인하십시오position: absolute. 이것은 본문의 배경색이 본문의 형광펜처럼 동작하는 것을 방지하기위한 것입니다.
이것은 신체의 RGBA 색상 배경을 변경하여 CSS 필터 와 비교할 수 있지만 CSS 필터와는 매우 다른 것으로 확장 될 수도 있습니다 . 예를 들어, rgba(0,255,0,.75)코드 스 니펫에서 볼 수 있듯이 매우 녹색 색조를 만듭니다.
HTML {
background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: rgba(0,255,0,.75);
}<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>- 팁 : 행 RGBA에 대응 R은 에드 G 재 N의 B 루의 경우 → lpha한다. 따라서 브라우저는
rgba(0,255,0,.75)로 예시 된 것으로 해석 됩니다{red:0, green:255, blue:0, alpha:'75%'}.
* 전체 호환성 표는 Can I Use 에서 찾을 수 있습니다 . 그러나 IE9가이를 지원하려면 "모두 표시"를 클릭해야합니다.
추가
이미 질문에 대답했지만 추가하고 싶은 것이 많으므로이 섹션 부록을 작성하고 잠재적으로 유용한 정보를 추가하도록합니다. 따라서 위의 내용을 더 외삽하기 위해 SVG를 배경 이미지로 사용하여 사악한 멋진 일을 할 수 있습니다. 예를 들어 아래 base64로 인코딩 된 SVG의 예에서 볼 수 있듯이 멋진 웹 사이트 아이콘이있는 로딩 화면 배경을 만들 수 있습니다.
HTML {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgYXJpYS1oaWRkZW49InRydWUiPjxnIGlkPSJrIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoLTEyMCkiIHRyYW5zZm9ybS1vcmlnaW49Ii41LjUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjMpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDAsMCwwLC45KSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9ImdyYWRpZW50VHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIgZHVyPSI3MDAwbXMiIGZyb209IjAiIHRvPSIzNjAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImQiIHI9Ii41IiBjeT0iLjUiIGN4PSIuNSI+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9ImdyZXkiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iYmxhY2siLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZSIgcj0iLjUiIGN5PSIuNSIgY3g9Ii41Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSJ5ZWxsb3ciLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0ieWVsbG93Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBzdHJva2U9ImdyZXkiIHN0cm9rZS13aWR0aD0iLjAxIiBpZD0iYiIgZD0iTS43NS43MUEuMzEuMzEgMCAxIDEgLjc1LjMxTC42OS4zOEEuMjIuMjIgMCAxIDAgLjY4LjY2TC41Ni41N0wuNi41MUwuODIuNjh6TS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6TS41NS41OEEuMDcuMDcgMCAxIDEgLjU2LjQ2TC42LjQzQS4xMi4xMiAwIDEgMCAuNTkuNjF6Ii8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImciPjxwYXRoIHN0cm9rZT0iZ3JleSIgZmlsbD0icmVkIiBzdHJva2Utd2lkdGg9Ii4wMSIgZD0iTS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2YpIiBmaWxsPSJ1cmwoI2MpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmVkIiBjbGlwLXBhdGg9InVybCgjZykiLz48L2c+PGcgdHJhbnNmb3JtPSJzY2FsZSgxLjEpIiB0cmFuc2Zvcm0tb3JpZ2luPSIuNS41Ij48dGV4dD48dGV4dFBhdGggaHJlZj0iI2IiIGZvbnQtc2l6ZT0iLjY1JSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgbGV0dGVyLXNwYWNpbmc9Ii0uNSUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUiPiBZT1VSIDx0c3BhbiBmaWxsPSJyZWQiPkVYQU1QTEUgV0VCU0lURTwvdHNwYW4+IExPR088L3RleHRQYXRoPjwvdGV4dD48L2c+PC9nPjwvc3ZnPg==');
width: 100%;
height: 100%;
position: relative;
background-size: cover;
}
body {
width: 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: rgba(255,255,255,.5);
}<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>- 팁 :
background-size: coverCSS 백그라운드에서 SVG 로고는 HTML 요소의 크기로 크기를 조정할 수됩니다.
글쎄, 배경 투명도 만 수행하는 유일한 CSS 방법은 RGBa있지만 이미지를 사용하고 싶기 때문에 Photoshop 또는 Gimp를 사용하여 이미지를 투명하게 만든 다음 배경으로 사용하는 것이 좋습니다.
이것은 정확
—
Kyle
opactiy: 1;하지 않으며 RGBa뿐만 아니라 CSS3 선언이 있습니다.
그가 말하는 것은
background-image컨테이너에 opacity스타일 을 설정 한 다음 같은 요소에 스타일 을 설정하는 것 입니다. 그것은 또한 그 요소의 텍스트와 다른 내용을 투명하게 만듭니다. 당신이 나를 믿지 않으면 이것을 시도하십시오 : w3schools.com/Css/tryit.asp?filename=trycss_transparency
opacity: ...모든 브라우저에서 지정할 수 있게되었습니다.