그레이 스케일 배경 CSS 이미지
웹에서 많이 검색했지만 CSS 배경 이미지를 그레이 스케일로 페이드하고 뒤로 페이드하는 크로스 브라우저 솔루션을 찾을 수 없습니다.
유일한 해결책은 CSS3 필터 그레이 스케일을 적용하는 것입니다.
-webkit-filter: grayscale(100%);
그러나 이것은 Chrome v.15 + 및 Safari v.6 +에서만 작동합니다 (여기에서 볼 수 있듯이 http://css3.bradshawenterprises.com/filters/ ).
많은 온라인 페이지에서 요소를 회색으로 처리하기 위해이 솔루션에 대해 설명합니다.
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
(여기에서 볼 수 있듯이 : http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html )
그러나 실제로 웹킷 필터가하는 것처럼 CSS 배경 이미지에서는 작동하지 않는 것 같습니다.
덜 고급 브라우저에서 필터에 대한 지원 부족을 해킹하는 솔루션이 있습니까 (아마도 jquery로?)?
여기 있습니다 :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 600px;
height: 600px;
float: left;
color: white;
}
.grayscale {
background: url(yourimagehere.jpg);
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.nongrayscale {
background: url(yourimagehere.jpg);
}
</style>
</head>
<body>
<div class="nongrayscale">
this is a non-grayscale of the bg image
</div>
<div class="grayscale">
this is a grayscale of the bg image
</div>
</body>
</html>
FireFox, Chrome 및 IE에서 테스트했습니다. 또한이 구현의 결과를 보여주는 이미지를 첨부했습니다.
편집 : 또한 이미지가 jQuery로 앞뒤로 전환되도록하려면 여기에 해당 페이지 소스가 있습니다 ... jQuery에 대한 웹 링크와 온라인 이미지를 포함 했으므로 복사 할 수 있어야합니다. 그것을 테스트하기 위해 붙여 넣기 :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
div {
border: 1px solid black;
padding: 5px;
margin: 5px;
width: 600px;
height: 600px;
float: left;
color: white;
}
.grayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.nongrayscale {
background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#image").mouseover(function () {
$(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);
});
$("#image").mouseout(function () {
$(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
});
});
</script>
</head>
<body>
<div id="image" class="nongrayscale">
rollover this image to toggle grayscale
</div>
</body>
</html>
편집 2 (IE10-11 사용자의 경우) : 위의 솔루션은 최근에 Microsoft가 브라우저에 적용한 변경 사항과 함께 작동하지 않으므로 여기에 이미지를 그레이 스케일 (또는 채도 감소) 할 수있는 업데이트 된 솔루션이 있습니다.
<svg>
<defs>
<filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
<feColorMatrix type="saturate" values="0" />
</filter>
</defs>
<image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg>현재 브라우저를 사용하면 다음과 같이 사용할 수 있습니다.
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
이를 해결하려면 :
img:hover{
-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
filter: grayscale(0%);
}
나와 함께 일했고 훨씬 더 짧습니다. CSS 내에서 할 수있는 일이 더 있습니다.
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() |
hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
For more information and supporting browsers see this: http://www.w3schools.com/cssref/css3_pr_filter.asp
I know it's a really old question, but it's the first result on duckduckgo, so I wanted to share what I think it's a better and more modern solution.
You can use background-blend-mode property to achieve a greyscale image:
#something {
background-color: #fff;
background-image: url("yourimage");
background-blend-mode: luminosity;
}
If you want to remove the effect, just change the blend-mode to initial.
You may need to play a little bit with the background-color if this element is over something with a background. What I've found is that the greyscale does not depend on the actual color but on the alpha value. So, if you have a blue background on the parent, set the same background on #something.
You can also use two images, one with color and the other without and set both as background and play with other blend modes.
https://www.w3schools.com/cssref/pr_background-blend-mode.asp
It won't work on Edge though.
EDIT: I've miss the "fade" part of the question.
If you wan't to make it fade from/to grayscale, you can use a css transition on the background color changeing it's alpha value:
#something {
background-color: rgba(255,255,255,1);
background-image: url("yourimage");
background-blend-mode: luminosity;
transition: background-color 1s ease-out;
}
#something:hover {
background-color: rgba(255,255,255,0);
}
I'm also adding a codepen example for completeness https://codepen.io/anon/pen/OBKKVZ
You can also use:
img{
filter:grayscale(100%);
}
img:hover{
filter:none;
}
You don't need to use complicated coding really!
Greyscale Hover:
-webkit-filter: grayscale(100%);
Greyscale "Hover-out":
-webkit-filter: grayscale(0%);
I simply made my css class have a separate hover class and added in the second greyscale. It's really simple if you really don't like complexity.
참고 URL : https://stackoverflow.com/questions/16340159/greyscale-background-css-images
'development' 카테고리의 다른 글
| 자바의 @Documented 주석 (0) | 2020.12.12 |
|---|---|
| Python argparse-여러 하위 구문 분석기에 인수 추가 (0) | 2020.12.12 |
| Berksfile의 Chef 'cookbook'과 metadata.rb의 'depends' (0) | 2020.12.12 |
| 인터페이스 빌더-경로에서 디자인 가능 항목을로드하지 못했습니다 (null). (0) | 2020.12.12 |
| bash 스크립트 내에서 ssh하는 방법은 무엇입니까? (0) | 2020.12.12 |