如何超越CSS的透明性方面

justLearning

据我了解,当将透明度方面放在一个元素上时,不透明度始终保持在最上面。我的问题是:在不透明度之上放置元素的最佳方法是什么。

这是Jsfiddle:http : //jsfiddle.net/6xV4B/

HTML:

<div id="header">
   <ul id="social" class="center">
       <li><a href="#"><img src="images/facebook.png" alt="Facebook Icon" /></a></li>
       <li><a href="#"><img src="images/twitter.png" alt="Twitter Icon" /></a></li>
       <li><a href="#"><img src="images/linkedIn.png" alt="linkedIn Icon" /></a></li>
    </ul>
</div>

<div id="backgroundOne">
    <div id="backgroundTwo" class="center"></div>
</div>

<div id="blankTile1"></div>

<div id="myPicture" class="center">
    <div id="logo"></div>
</div>

<div id="blanktileTwo"></div>

这是CSS:

#header {
    width: 100%;
    height: 250px;
    background-color: #643b0f;
    opacity: .5;
}
#social {
    width: 1050px;
    margin: 0 auto;
}
#social li {
    display: inline-block;
    margin: 50px 0 0 50px;
}
#social li a {
    padding: 0 50px;
}
#backgroundOne {
    width: 100%;
    height: 1200px;
    background-color: blue;
    background-repeat: no-repeat;
    background-size: cover;
}
#myPicture {
    width: 650px;
    height: 955px;
    margin: -1200px 0 0 325px;
    position: absolute;
    display: block;
    background-color: yellow;
}
#backgroundTwo {
    width: 960px;
    height: 1200px;
    background-color: #000;
    opacity: .5;
}
#logo {
    background-color: green;
}
#blankTile1 {
    width: 100%;
    height: 478px;
    background-color: transparent;
}
#blankTile2 {
    width: 100%;
    height: 478px;
    background-color: transparent;
}

(为了进一步理解,这是视差项目的开始。这是为了学习此技术。)

法格尼·潘查(Falguni Panchal)

像这样

因此,一种方法solution是使用微小的透明材料PNG作为重复的背景图像来解决此问题。唯一的问题是IE6,并且有此链接

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用CSS淡化图像而没有不透明性?

来自分类Dev

证书透明性快速入门:如何监视域列表?

来自分类Dev

如何为KDE的终端配置背景透明性?

来自分类Dev

如何改变图像的不透明性

来自分类Dev

如何为KDE的终端配置背景透明性?

来自分类Dev

WPF PngBitmapEncoder:如何禁用背景透明性?

来自分类Dev

证书透明性快速入门:如何监视域列表?

来自分类Dev

证书透明性如何查询域的证书

来自分类Dev

Skrollr背景透明性?

来自分类Dev

当图本身具有透明性时,如何使Gnuplot中的图的键不具有透明性?

来自分类Dev

OpenGL透明性不透明

来自分类Dev

OpenGL透明性无法正常工作

来自分类Dev

Gnome终端的背景透明性

来自分类Dev

摆脱图像中不必要的CSS不透明性?

来自分类Dev

如何保证F#应用程序中的参照透明性?

来自分类Dev

如何在Windows 8桌面中禁用任务栏透明性?

来自分类Dev

如何在PHP中使用透明性最小化PNG图像并调整其大小

来自分类Dev

为什么Matlab的透明违反了透明性?

来自分类Dev

Firefox上具有不透明性和z-index的意外CSS 3过渡

来自分类Dev

纯度,参照透明性和状态单价

来自分类Dev

当Java8使用参照透明性时

来自分类Dev

我对可变类的“引用透明性”的理解正确吗?

来自分类Dev

酒吧半透明性在iOS 7.0.3中消失了

来自分类Dev

组件,隔离功能和“参照透明性”

来自分类Dev

例外情况和参照透明性

来自分类Dev

类型推断会干扰参照透明性

来自分类Dev

来自FillRectangle的不希望有的透明性

来自分类Dev

GraphicsMagic无法识别PDF的背景透明性

来自分类Dev

Matplotlib pgf后端是否支持透明性?

Related 相关文章

热门标签

归档