Question

我需要弄清楚如何只制作这个div的一部分，透明。

例如，导航栏宽度为750像素。我需要让前75个像素透明。我知道我需要使用这段代码：

opacity: 0|initial|inherit;

但是，我如何仅将该代码应用于750像素div中的部分（75px）？这是我需要定位的ID和类。

#mega_main_menu.primary > .menu_holder > .mmm_fullwidth_container {
    background-image: url('http://visualicreative.com/wp-content/uploads/2014/07/Nav-     Bar.png');
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

网站：www.visualicreative.com

Answer 1

你可以创建2个具有相同背景的div元素，但左边的元素具有透明度，

HTML：

<div>
<div class="bar bar-left">Transparent</div>
<div class="bar bar-right">Not Transparent</div>
</div>

CSS：

.bar {
background-image: url('http://visualicreative.com/wp-content/uploads/2014/07/Nav-Bar.png');
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
    width:100%;
    height:40px;
    background-size:100%;
}

.bar-left{
    opacity: .7;
    float:left;
    width:75px;
}

.bar-right{
    width: 675px;
    float:left;
}

这是一个演示： http://jsfiddle.net/BK3HS/

定位div中的特定像素

1 个答案: