programing

배경 이미지와 불투명도를 동일한 속성으로 설정할 수 있습니까?

lastcode 2023. 7. 31. 21:26
반응형

배경 이미지와 불투명도를 동일한 속성으로 설정할 수 있습니까?

CSS 레퍼런스에서 이미지 투명도 설정 방법과 배경 이미지 설정 방법을 확인할 수 있습니다.하지만 투명한 배경 이미지를 설정하기 위해 이 두 가지를 어떻게 결합할 수 있을까요?

배경으로 사용하고 싶은 이미지가 있는데 너무 밝아서 불투명도를 0.2 정도로 줄이고 싶습니다.어떻게 해야 하나요?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

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

두 가지 방법:

  1. PNG로 변환하여 원본 이미지 0.2 불투명도로 만들기
  2. 좋은 방법은 (더 좋은 방법)이 있습니다.<div>, 그은것입니다.position: absolute; 앞에#main 그고같높과 같은 높이입니다.#main와 배경 이미지를 합니다.opacity: 0.2; filter: alpha(opacity=20);.

1div이고 투명 이미지가 없는 솔루션:

멀티백그라운드 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");

http://jsfiddle.net/pBVsD/1/

간단한 해결책

그라데이션을 배경 이미지로만 설정해야 하는 경우:

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

저는 이것을 보았고 CSS3에서는 이제 코드를 이렇게 넣을 수 있습니다.전체적인 배경을 커버하고 싶다고 가정해 보겠습니다. 저는 이런 일을 할 것입니다. 그럼같으로.hsla(0,0%,100%,0.70)orgba 당신은 당신이 원하는 모양을 얻기 위해 포화도나 불투명도의 흰색 배경을 사용합니다.

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

이를 위해 CSS psuedo selector :: 이후를 사용할 수 있습니다.여기 작업 데모가 있습니다.

enter image description here

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

저도 비슷한 문제가 있었습니다.저는 이미지를 가지고 있었고 투명도를 낮추고 이미지 뒤에 검은 배경을 갖고 싶었습니다.불투명도를 줄이거나 검은색 배경 또는 보조 눈금을 만드는 대신 영상에 선형 그라데이션을 한 줄로 모두 설정합니다.

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");

저는 @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;
}

단순한 이미지를 위한 좋은 방법은 HTML 요소의 배경을 그렇게 설정하기 위해 CSS만을 사용하여 수행하는 것입니다.

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>

  • 팁: HTML이 어떤 방식인지 알아봅니다.position: relative이 이몸있는인 동안에.position: absolute이것은 본문의 배경색이 본문의 텍스트 형광펜처럼 동작하는 것을 방지하기 위한 것입니다.

이것은 신체의 RGBA 색 배경을 중심으로 변화시킴으로써 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는 Red Green Blue Alpha에 해당합니다.그래서, 브라우저가 해석합니다.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에 추가...

 filter: opacity(50%);

JavaScript에서 사용...

 element.style.filter='opacity(50%)';

NB: 필요에 따라 공급업체 접두사를 추가하지만 Cromium은 필요하지 않습니다.

#메인에 position=absolute, top=0, width=100%를 추가하고 불투명도 값을 #background로 설정했습니다.

#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}

저는 메인 앞에 있는 디브에 배경을 적용했습니다.

불투명도와 배경 이미지로 배경 선형 그라데이션을 추가합니다.이 예에서는 흰색 배경 선형 그라데이션을 사용하고 있습니다.하지만 당신은 어떤 rgba 색상도 사용할 수 있습니다.

background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://kusalthiwanka.github.io/images/kusal.jpg");

음, 배경 투명성만 하는 유일한 CSS 방법은 다음과 같습니다.RGBa하지만 당신이 이미지를 사용하기를 원하기 때문에 저는 포토샵이나 김프를 사용하여 이미지를 투명하게 만든 다음 배경으로 사용하는 것을 제안합니다.

저는 같은 문제가 있어서 이 게시물을 우연히 발견했는데, 포토샵에서 불투명도를 쉽게 조정할 수 있는데 왜 CSS를 만지작거리고 값을 조정하고 새로 고침을 누르는 것에 대해 생각했습니다.이미지를 복사하여 새 레이어로 붙여넣은 다음 불투명도 슬라이더를 이동합니다.

저도 비슷한 문제가 있었는데 포토샵으로 배경 이미지를 찍고 필요한 불투명도로 새로운 .png을 만들었습니다.내 CSS가 모든 장치와 브라우저에서 작동하는지 여부에 대한 걱정 없이 문제 해결

언급URL : https://stackoverflow.com/questions/4183948/can-i-set-background-image-and-opacity-in-the-same-property

반응형

'programing' 카테고리의 다른 글

텍스트 파일에 문자열이 포함된 경우 PowerShell을 사용하여 텍스트 파일에서 줄 제거  (0) 2023.08.05
Node.js HTTP 서버를 사용하여 단일 쿠키 가져오기 및 설정  (0) 2023.08.05
Enum에서 문자열을 검색하고 Enum을 반환합니다.  (0) 2023.07.31
파일이 없는 경우 파일 만들기  (0) 2023.07.31
단일 스레드, 비OS, 임베디드 애플리케이션에서 글로벌 변수가 무엇입니까?  (0) 2023.07.31

'programing'의 다른글

  • 현재글배경 이미지와 불투명도를 동일한 속성으로 설정할 수 있습니까?

관련글

댓글

티스토리툴바