Elements with -webki-filter: blur(5px) are not properly printed on Chrome.
-webkit-print-color-adjust: exact doesn't help.
My Chrome version is 51.0.2704.84 (64-bit).
JsBin
Code:
body {
-webkit-print-color-adjust: exact;
}
div {
width: 200px;
height: 160px;
background: gray;
}
.blurred {
filter: blur(5px);
-webkit-filter: blur(5px);
}
<div></div>
<div class="blurred"></div>
Related
On Windows, with Chrome, I try to use backdrop-filter: blur and mix-blend-mode: soft-light, but every time my cursor moves on the Chrome Tabs, rectangle glitches occur at the top of the page.
I don't know how to fix it...
body {
margin: 0;
padding: 0;
}
.background {
background-color: #0000ff;
}
.blur-leftside {
width: 50vw;
height: 100vh;
backdrop-filter: blur(15px);
mix-blend-mode: soft-light;
background: #ffffff;
}
<html>
<body>
<div class="background">
<div class="blur-leftside"></div>
</div>
</body>
</html>
I have some css in place that uses both a border-radius and a grayscale filter. I want the border radius to be in place all the time but the grayscale to disappear on hover.
The border radius works fine until I add in the grayscale, then it stops working and just shows the images as a square. On hover (when the filter is removed) the border-radius kicks in again. Does anyone know what I am missing?
I have searched but can't find an answer.
.esg-entry-media {
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 50% !important;
border-radius: 50% !important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.esg-entry-media:hover {
border: solid 10px #fff !important;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
I have included an image of the hover and non-hover states for reference.
You could use a div to wrap around the image put an overflow: hidden; on it and give the div the same width and height. Then put border-radius: 50%; on the div. Only apply the grayscale on the image. At the end to change the img do,
div:hover .esg-entry-media{
filter: grayscale(0)
}
On the wrapping div do,
div:hover {
border: 10px solid *coloryouwant*
}
which browser? works fine for me (chrome, firefox, safari):
.esg-entry-media {
width: 250px;
height: 250px;
border: 10px solid transparent;
border-radius: 50%;
filter: grayscale(100%);
}
.esg-entry-media:hover {
border-color: #a00;
filter: grayscale(0%);
}
<img src="http://placekitten.com/200/300" class="esg-entry-media" />
Trying to create a page background in CSS that resembles a grid of assorted images, all cropped and resized to the same width and height.
Ideally, this background would pull random jpegs from a specific folder I create (assets/images/background_photos), and cascade them down/across the page within the borders of a pre-defined section.
Something like the attached image, but with multiple images instead of just the Star Wars poster repeated:
.movie_poster_background{
background-image: url("background_photos/star_wars.jpg");
background-size: 150px;
width: 100%;
height: 500px;
position: absolute;
z-index: -1;
-webkit-filter: grayscale(1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: gray;
filter: grayscale(100%);
opacity: 0.2;
}
You can consider multiple background then adjust the position of each image:
.box{
background-image:
url("https://picsum.photos/200/200?image=1069"),
url("https://picsum.photos/200/200?image=1065"),
url("https://picsum.photos/200/200?image=1066"),
url("https://picsum.photos/200/200?image=1067"),
url("https://picsum.photos/200/200?image=1068"),
url("https://picsum.photos/200/200?image=1062");
background-size: 200px 200px;
background-position:0 0,200px 0,400px 0,
0 200px,200px 200px,400px 200px;
background-repeat:no-repeat;
width: 100%;
height: 400px;
}
<div class="box"></div>
I am trying to grayscale an image and this is the code I am using:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.comment{
margin-left: 50px;
}
img.resize{
width:40px;
height: auto;
}
img {
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1);
}
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png" class="img-responsive resize">
But its not working. Any ideas why?
Here I have an example.
you are trying to gray-scale an image which is already Black and White, so try to gray-scale a colored image, hover it see the image back to colored
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.comment {
margin-left: 50px;
}
img.resize {
width: 40px;
height: auto;
}
img {
filter: gray;
/* IE6-9 */
filter: grayscale(100%);
/* Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(1);
}
img:hover {
filter:0;
/* IE6-9 */
filter: grayscale(0%);
/* Microsoft Edge and Firefox 35+ */
-webkit-filter: grayscale(0);
}
<img src="http://lorempixel.com/50/50" class="img-responsive resize">
I need to put a set of b/w images with colored borders on the page. I don't want to edit the images in Photoshop, since there may be some dynamically added ones later on; hence, I've used the corresponding filter:grayscale(100%).
img.myImage {
display: block;
position: relative;
border: 6px solid #0090ff;
width: 85%;
margin: 0 auto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
However, it affects the colored border, which also becomes grayish. Is there a "painless" workaround here?
Since img does not accept :after/:before, and since filter seems to apply on children elements, the only solution I can think of is the basic:
div {
display: inline-block;
background-color: #0090ff;
padding: 6px;
width: 200px;
}
img {
display: block;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
width: 100%;
}
<div>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" />
</div>