html – CSS图像不透明翻转毛刺

概述我做了这个翻转： jsfiddle.net/DH6Lu/ 但正如你可以看到背景图像故障.当我不在主div上使用不透明度时,情况并非如此： http://jsfiddle.net/6KT9p/ 知道什么是错的吗？ <div id="opacity"> <div class="box"> <a class="link" href="#"> <div cl @H_404_4@ 我做了这个翻转：

jsfiddle.net/DH6Lu/

但正如你可以看到背景图像故障.当我不在主div上使用不透明度时,情况并非如此：

http://jsfiddle.net/6KT9p/

知道什么是错的吗？

<div ID="opacity">    <div >        <a  href="#">            <div >                <img src="http://lorempixel.com/340/192/" wIDth="340" height="192">                <div >                    <h3>titel2</h3>                </div>            </div>        </a>    </div></div>

.Box {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;}.inner {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    overflow: hIDden;}.inner img {    position: absolute;    opacity: 1;    -webkit-Transition: opacity  0.5s ease;}.inner img:hover {    opacity: 0.15}.description {    background: url(http://www.merkendIEwerken.be/wp-content/themes/merkendIEwerken/img/close-recent.png) #aaa repeat 0 0 fixed;    wIDth: 340px;    height: 192px;    position: absolute;    z-index: -1;}.description h3 {    color: #fff;    Font-size: 18px;    text-transform: uppercase;    text-align: center;    position: absolute;}#opacity {    opacity: 0.5}

@H_404_4@解决方法 问题来自背景的固定属性.
将CSS设置为

.description {    background: url(http://www.merkendIEwerken.be/wp-content/themes/merkendIEwerken/img/close-recent.png) #aaa repeat 0 0;    wIDth: 340px;    height: 192px;    position: absolute;    z-index: -1;}

它会起作用

fiddle

问题还与处理这与cpu不同的GPU有关. GPU在转换期间处理后台,cpu处于静态状态.如果设置transform：translateZ(1px) – 启用GPU的常用技巧之一 – 背景将永久保留在偏移中.它解决了故障,但外观不正确.

@H_404_4@ @H_404_4@ @H_404_4@ @H_404_4@ 总结

以上是内存溢出为你收集整理的html – CSS图像不透明翻转毛刺全部内容，希望文章能够帮你解决html – CSS图像不透明翻转毛刺所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。