综合技术

Static background image with transparent content

微信扫一扫,分享到朋友圈

Static background image with transparent content
0

This is a question for the CSS gurus. A trend at the moment seems to be to place an image in the background and then have a transparent content scroll over the top.

AIM

What technique is used to produce this result, where the top content is transparent and slides over a background image.

http://jsfiddle.net/spadez/2uUEL/9/embedded/result/

MY ATTEMPT

What I have tried to do is apply a background and then make the top section transparent on top of it.

http://jsfiddle.net/spadez/N9sCD/3/

body {
    background-image"http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg";
}
#top {
    height: 160px;
    opacity:0.4;
    filter:alpha(opacity=40);
}
#section {
    height: 600px; background-color: blue;
}

QUESTION

How has this technique of a transparent div moving over a static background image been achieved in my first link and how can I reproduce it. It must be a CSS solution because it still works without javascript enabled.

Here’s a
FIDDLE



#top { background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/06/6.jpg) fixed; background-size: cover; position: relative; height: 400px; } #top a { background: rgba(200,200,200,0.5); display: block; float: right; margin: 10px 15px; padding: 2px 5px; text-decoration: none; color: #111; cursor: pointer; border: 2px solid #ddd; border-radius: 8px; transition: color 0.2s ease-in; } #top a:hover { color: #fff; } .mask { background: rgba(0,187,255,0.5); /* or hex combined with opacity */ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 -5px 8px -3px #666; /* makes #top little inset */ } .logo { position: relative; width: 60px; height: 60px; margin: 10px; } .section { height: 600px; } .l { background: #ddd; } .d { background: #333; }

Update #top
content placed inside .mask
which removes need for z-index
.

阅读原文...


Hello, buddy!

CCIE DC – 1.1.a Link Aggregation – Configure Virtual Port Channels

上一篇

魅族PRO 7 Plus充电器拆解:特殊USB接口

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Static background image with transparent content

长按储存图像,分享给朋友