Mix-blend-mode 不适用于 phone 浏览器
Mix-blend-mode doesn't work on phone browser
我正在制作一个响应式网站。到目前为止,我可以让 mix-blend-mode 在不同的屏幕分辨率(台式机、笔记本电脑、平板电脑)上工作。但是当我在 phone(galaxy S5,UC 浏览器)上测试它时,mix-blend-mode 似乎坏了并且显示错误。请看图片:
**更新: 我在 phone 的 CHROME 浏览器上测试它,它工作正常,所以它必须取决于浏览器?
外观应该如何
它在 phone
上的样子
我的代码:
.imgwrapper {
position: relative;
display: inline-block;
}
.imgcon + div {
position: absolute;
left: 42%;
top: 44%;
color: white;
text-decoration: underline;
opacity:0;
display: block;
pointer-events: none;
font-size: 18px;
letter-spacing: 4px;
}
.imgcon {
display: inline-block;
position: relative;
background: rgba(209, 19, 15, 0);
transition: ease 0s;
-webkit-transition: ease 0s;
-moz-transition: ease 0s;
-ms-transition: ease 0s;
-o-transition: ease 0s;
mix-blend-mode: multiply;
}
.imgcon > img {
display: block;
transition: ease 0s;
-webkit-transition: ease 0s;
-moz-transition: ease 0s;
-ms-transition: ease 0s;
-o-transition: ease 0s;
}
.imgcon:hover {
background: #b41f24;
background: rgba(180, 31, 36, 0.85);
}
.imgcon:hover > img {
z-index: -1;
-webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
filter: grayscale(100%) blur(1.5px) contrast(100%) ;
mix-blend-mode: multiply;
}
.imgcon:hover + div {
display: block;
opacity: 1;
z-index: 1;
}
@media screen and (max-width: 479px) {
#works.stackgrid .item { width: 50%; }
.logo {width: 100%;}
.quote-phrase {font-size:30px; line-height:30px; text-align: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold; display: block; }
.i{font-size:42px;line-height:55px; text-align-last: justify; letter-spacing: 1px; color: #595959; font-family: Neusa ExtraBold; margin-left:-1px;}
.digital { font-size: 18px;line-height:19px; text-align: right;
width:100%;
padding-bottom: 15px;
margin-left:72px;
padding-top: 10px;
letter-spacing: 1.2px;}
#carousel{margin-left:-1px; width:140%; }
#view{font-size: 16px; top:40%; left: 40%;}
#header .logo-wrap { margin: 50px 0 -150px 0; }
#footer p {font-size:16px; line-height:17px; width: 200px;}
}
<a href="works.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Hai Vinh Honey</h3>
<span class="category">Identity, packaging</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="http://i.imgur.com/JefejGa.png" /></div>
<div id="view">view</div></div>
</div><!-- // .item -->
</div><!-- // .desktop-3 -->
</a>
mix-blend-mode
属性 UC 浏览器不支持 android。
您可以在此处查看浏览器支持情况:
http://caniuse.com/#search=mix-blend-mode
你的代码没有问题。只是许多浏览器不支持该规则。您可以随时测试您的规则是否被所有浏览器支持或不使用该网站
我正在制作一个响应式网站。到目前为止,我可以让 mix-blend-mode 在不同的屏幕分辨率(台式机、笔记本电脑、平板电脑)上工作。但是当我在 phone(galaxy S5,UC 浏览器)上测试它时,mix-blend-mode 似乎坏了并且显示错误。请看图片:
**更新: 我在 phone 的 CHROME 浏览器上测试它,它工作正常,所以它必须取决于浏览器?
外观应该如何
它在 phone
上的样子
我的代码:
.imgwrapper {
position: relative;
display: inline-block;
}
.imgcon + div {
position: absolute;
left: 42%;
top: 44%;
color: white;
text-decoration: underline;
opacity:0;
display: block;
pointer-events: none;
font-size: 18px;
letter-spacing: 4px;
}
.imgcon {
display: inline-block;
position: relative;
background: rgba(209, 19, 15, 0);
transition: ease 0s;
-webkit-transition: ease 0s;
-moz-transition: ease 0s;
-ms-transition: ease 0s;
-o-transition: ease 0s;
mix-blend-mode: multiply;
}
.imgcon > img {
display: block;
transition: ease 0s;
-webkit-transition: ease 0s;
-moz-transition: ease 0s;
-ms-transition: ease 0s;
-o-transition: ease 0s;
}
.imgcon:hover {
background: #b41f24;
background: rgba(180, 31, 36, 0.85);
}
.imgcon:hover > img {
z-index: -1;
-webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
filter: grayscale(100%) blur(1.5px) contrast(100%) ;
mix-blend-mode: multiply;
}
.imgcon:hover + div {
display: block;
opacity: 1;
z-index: 1;
}
@media screen and (max-width: 479px) {
#works.stackgrid .item { width: 50%; }
.logo {width: 100%;}
.quote-phrase {font-size:30px; line-height:30px; text-align: justify; letter-spacing: 3px; color: #595959; font-family: Neusa ExtraBold; display: block; }
.i{font-size:42px;line-height:55px; text-align-last: justify; letter-spacing: 1px; color: #595959; font-family: Neusa ExtraBold; margin-left:-1px;}
.digital { font-size: 18px;line-height:19px; text-align: right;
width:100%;
padding-bottom: 15px;
margin-left:72px;
padding-top: 10px;
letter-spacing: 1.2px;}
#carousel{margin-left:-1px; width:140%; }
#view{font-size: 16px; top:40%; left: 40%;}
#header .logo-wrap { margin: 50px 0 -150px 0; }
#footer p {font-size:16px; line-height:17px; width: 200px;}
}
<a href="works.html?option=haivinh" class="permalink">
<div class="desktop-3 mobile-half columns">
<div class="item first-row">
<h3>Hai Vinh Honey</h3>
<span class="category">Identity, packaging</span>
<div class="imgwrapper">
<div class="imgcon">
<img src="http://i.imgur.com/JefejGa.png" /></div>
<div id="view">view</div></div>
</div><!-- // .item -->
</div><!-- // .desktop-3 -->
</a>
mix-blend-mode
属性 UC 浏览器不支持 android。
您可以在此处查看浏览器支持情况:
http://caniuse.com/#search=mix-blend-mode
你的代码没有问题。只是许多浏览器不支持该规则。您可以随时测试您的规则是否被所有浏览器支持或不使用该网站