CSS를 사용하여 배경을 어둡게하는 방법은 무엇입니까?

텍스트가있는 요소가 있습니다. 불투명도를 낮출 때마다 전신의 불투명도를 낮 춥니 다. background-image다른 모든 것이 아니라 더 어둡게 만들 수있는 방법 이 있습니까?

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

이 코드를 이미지 CSS에 추가하십시오.

 body{
 background:
        /* top, transparent black, faked with gradient */ 
        linear-gradient(
          rgba(0, 0, 0, 0.7), 
          rgba(0, 0, 0, 0.7)
        ),
        /* bottom, image */
        url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

참조 : linear-gradient ()-CSS | MDN

업데이트 : 모든 브라우저가 RGBa를 지원하는 것은 아니므로 '대체 색상'이 있어야합니다. 이 색상은 대부분 단색 (완전 불투명) background:rgb(96, 96, 96)입니다. 예 : . RGBa 브라우저 지원에 대해서는 이 블로그 를 참조하십시오 .

: after psuedo-element 사용 :

.overlay {
    position: relative;
    transition: all 1s;
}

.overlay:after {
    content: '\A';
    position: absolute;
    width: 100%; 
    height:100%;
    top:0; 
    left:0;
    background:rgba(0,0,0,0.5);
    opacity: 1;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.overlay:hover:after {
    opacity: 0;
}

내 펜 확인>

http://codepen.io/craigocurtis/pen/KzXYad

로 설정 background-blend-mode하는 darken것이 목적을 달성하는 가장 직접적이고 짧은 방법이지만 background-color블렌드 모드가 작동하려면 먼저 설정해야합니다 .
나중에 javascript에서 값을 조작해야하는 경우에도 이것이 가장 좋은 방법입니다.

background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;

배경 혼합에 사용할 수 있습니까?

이 작업을 수행 할 수 있습니다. box-shadow

그러나 실제로 이미지에 적용 할 수는 없습니다. 단색 배경에만

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.mycooldiv {
  width: 400px;
  height: 300px;
  margin: 2% auto;
  border-radius: 100%;
}
.red {
  background: red
}
.blue {
  background: blue
}
.yellow {
  background: yellow
}
.green {
  background: green
}
#darken {
  box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
  /*darkness level control - change the alpha value for the color for darken/ligheter effect */
}

Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>

절대 및 음수 Z- 색인으로 배치 된 배경 용 컨테이너를 사용할 수 있습니다. http://jsfiddle.net/2YW7g/

HTML

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

CSS

.main{
    width:400px;
    height:400px;
    position:relative;
    color:red;
    background-color:transparent;
    font-size:18px;
}
.main .bg{
    position:absolute;
      width:400px;
    height:400px;
    background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
    z-index:-1;
}

.main:hover .bg{
    opacity:0.5;
}

이미 여기에 추가하려면 다음을 사용하십시오.

background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");

... 70 % 선형 그라데이션 오버레이의 브라우저 간 지원을 위해. 이미지를 밝게하려면 모든 것을 0,0,0's'로 변경할 수 있습니다 255,255,255. 70 %가 약간 많으면 계속해서 .7. 그리고 향후 참조를 위해 http://www.colorzilla.com/gradient-editor/를 확인 하십시오.

배경색을 밝거나 어둡게하려면이 CSS 코드를 사용할 수 있습니다.

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

나를 위해 필터 / 그라디언트 접근 방식이 작동하지 않았으므로 (아마도 기존 CSS로 인해) :before대신 의사 스타일링 트릭을 사용했습니다.

.eventBannerContainer {
    position: relative;
}
.eventBannerContainer:before {
    background-color: black;
    height: 100%;
    width: 100%;
    content: "";
    opacity: 0.5;
    position: absolute;
    display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
    position: relative;
}