저 배경 이미지 설정 및 불투명도의 동일한 속성의?

내가 볼 수 있도록 CSS 에서 참조입니다 설정 방법 이미지 투명도로 과 배경 이미지를 설정 방법. 그러나 이 두 가지 설정을 위해 투명 배경 이미지를 합칩니다 어떻게 해야 합니까?

나는 것 처럼 사용할 수 있다는 이미지를 I& # 39, d, d like to # 39 - I& 배경, 그러나 그것은 너무 밝은 약 0.2 다운되어도 선반가공 불투명도입니다. How can I do this?

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
TylerH
편집된 질문3일 1월 2019 в 8:11
프로그래밍
css
15일 11월 2010 в 11:37
2 파운드
#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;
}
Nisse Engström
편집된 답변17일 9월 2018 в 10:01
해설 (11)
해결책

두 가지 방법:

  1. 원본 이미지를 0.2 불투명도의 변환하시겠습니까 PNG 저회가
  2. (더 나은 방법) ', 즉', '투명지에 &lt div&gt 포지셔닝하십시오: # ',' 주 '와 같은 높이로 상대경로를 전에' # '와' 다음 주 배경 이미지를 적용하십시오 불투명도와: 0.2. 필터: 알파 (불투명도의 = 20), '.
TylerH
편집된 답변22일 9월 2014 в 2:54
해설 (4)

1 개의 div 솔루션이므로 없고 투명해집니다 이미지:

Css3 피쳐이고 두 개의 배경을 동일팔레트에 멀티백그로런드 사용할 수 있습니다. 이미지와 함께 한 다른 수신기마다 투명해집니다 패널 위에 (cause I 생각하노라 there& # 39 의 무리라구 직접 설정할 수 불투명도입니다 배경 이미지):

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;

39 너회가 can& rgba (255,255,255,0.5) ',' t 사용할 수 있도록 # 39 의 내려졌단 때문에 단지 수락됨 뒤로를 I&, 예를 들어, 각 ve 그래디언트 생성할지 사용하는 브라우저 (that& # 39 의 것이 왜 이렇게 오래). 그러나 개념은 다음과 같다.

background: tranparentColor, url("myImage");

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

해설 (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);
Francesco Borzi
편집된 답변17일 9월 2018 в 7:16
해설 (3)

이 또한 이와 같은 코드를 배치하십시오 CSS3 이제 봤어요. I would say I want it 전체를 위해 이 같은 배경 뭔가 할 수 있습니다. '슬라 가진 다음 (0%, 100%, 0.70)' 또는 'rgba 흰색 바탕에 채도 (saturation) 또는 불투명도의 사용하는 것을 볼 수 있습니다 (백분율) 하고 있다.

.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;
}
jrbedard
편집된 답변13일 1월 2017 в 1:34
해설 (2)

이를 위해 유사 선택기를 이후 css 를 사용할 수 있습니다. 이것은 apc® 데모.

! [입력하십시오. 이미지 여기에 설명을] [1]

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

해설 (0)

내가 답을 사용한 @Dan 이스트웰 및 작동하잖아 잘 았겠습니다. 이 코드는 코드 뿐만 아니라 그의 비슷한 일부 추가.

.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;
}
Nisse Engström
편집된 답변17일 9월 2018 в 9:56
해설 (0)

Do it for a simple image 는 할 수 있는 좋은 방법입니다 사용할 때만 CSS HTML 요소 같은 배경을 설정할 수 있습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
}

끝 - &lt 스니핏 >;!

,, Afaq 스케쳐내 &lt i&gt fancy&lt /i&gt 설정하고 해당 불투명도의 에서 설정할 수 있습니다 다음 IE9+* 투명해집니다 배경색입니다 바디입니다. 이 작품 만들기 위해 하얀 반투명 슬픔으로창백해지고 오버레이 이미지, 그리고 더 밝게 보인다. 예를 들어, 슬픔으로창백해지고 75% 를 불투명도의 ('rgba (255,255,255, .75)') 는 다음과 같은 효과를 낼 수 있을 것 "이라고 말했다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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>

끝 - &lt 스니핏 >;!

    • Tip:* 표시문 어떻게 HTML 이 포지션: 반면, 몸은 상대치 '포지션: 절대 '. 이는 마치 바디입니다 배경색입니다 에서 나오는 것을 막기 위해 더 많은 형광펜 텍스트의 된다.

그래도 뭔가 매우 유사한 이 확대될 수도 있습니다 # 39 의 RGBA body& 주변에 변경하여 필터링합니다 구분되어, CSS 색상 배경. 예를 들어, 'rgba (0,255.0, .75)' 에서 볼 수 있듯이 매우 녹색 색조 스니핏 코드를 만들 것이라고 주장했다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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>

끝 - &lt 스니핏 >;!

        • RedGreenBlueAlph RGBA Tip: 해당합니다. 따라서 있지만브라우저에 특유의 'rgba (0,255.0, .75)', ' {빨강입니다 0 녹색 255w, 블루 0 alpha:& 할 수도 있다, 75% 가 대표적 사례다 # 39, & # 39;}'.

br /&gt <;

  • 전체 호환성에서는 usb. &lt, 테이블, https://caniuse.com/ # 성과 = a href = &quot css3-colors&quot &gt /a&gt Use.&lt 합니까;;;; 그러나 All&quot 표시 눌러 참고 할 "; ie9 는 것을 볼 수 있습니다.

br /&gt <;

&lt h1&gt Addendum&lt /h1>;;; 하지만 내가 예수님의 질문 더 있는데, 나는 내가 이미 답변됨 추가할 수 있는 유용한 정보를 추가 구매와 부록 (제목 이 섹션에서는 일부 정보기술 (it). 따라서 위 컨텐츠에 대해 추정하는 데 더욱 svg 배경 이미지로 해야 하는 게 나의 주 크고 놀라운 전지전능하심이라 사용할 수 있습니다 예를 들어, 배경 화면 아이콘을 볼 수 있듯이 가있어야합니다 로드을 만들 수 있습니다 멋진 웹 사이트 (예를 들어, svg 는 base64 인코딩되지 같습니다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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>

끝 - &lt 스니핏 >;!

    • Tip:* 이 '배경 크기: css 가 SVG 빽이라는 '의 로고 크기에 대한 배경 스크램블된 크기조정 HTML 요소.
3.14159265358979323846264
편집된 답변29일 5월 2017 в 9:57
해설 (0)

Css 에 추가.

 filter: opacity(50%);

Javascript 에서 사용합니다.

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

NB: 필요에 따라 추가 구입업체별 접두어를 사용하지 않고 있지만 크롬 문제가 없어야 합니다.

해설 (0)

유사한 문제가 있었습니다. 내가 가진 이미지를 갖고 싶다는 절감하십시오 투명도로 뒤에 검은 배경 이미지입니다. 검은색 div 배경색이나 불투명도입니다 만들거나 줄이는 대신 내가 한 줄로 모든 이미지에 대한 모든 보조 선형 그래디언트 설정:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

해설 (0)

또, 상단형 = 0 = 절대 그냥 포지셔닝하십시오, 너비 = 100% 의 기본 설정 값을 # # 불투명도입니다 및 배경

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

내가 전에 배경은 발려짐 div 기본.

해설 (0)

'만' RGBa 은 CSS 만 잘 방식입니다 투명도로 통해 배경 때문에 이미지를 사용할 수 있도록 꼭 이래야겠어요 제안하세요 Photoshop 또는 Gimp 를 사용하여 이미지를 투명해집니다 그리곤요 사용해 배경으로 렌더링합니다.

해설 (2)

이 같은 문제를 왜 왔는지 구현하므로 게시물로의 as I 경식도 어졌다면 생각해봤죠 조정 및 css 를 사용한 대한 값을 못 재생율에서 엉망하지 당직실이고 쉽게 불투명도입니다 조정하십시오 photoshop 에서? 정보기술 (it) 을 새 레이어에는 이동시키십시오 슬라이더에서 불투명도입니다 붙여넣거나 이미지를 복사합니다.

해설 (1)

난 이미 유사한 문제가 걸린 배경 이미지를 만들고, 그냥 photoshop 과 함께 새로운 .png 불투명도입니다 필요하다. 만약 내 모든 디바이스에는 &amp, CSS 협력했습니다 건너 걱정 없이 문제 해결 브라우저

해설 (0)