divの右側に背景画像を表示しようとしていますが、これはdiv全体をカバーしていません。divの画像:afterまたは:before?
は、今のところは(DIV1は、背景色である)このようなものだ:
<div id="div1">
<div id="image"></div>
Text
</div>
CSS:
.div1 {
background: #324458;
color: #FFF;
font-size: 0.9em;
font-weight: bold;
padding: 10px;
width: 100%;
position: relative;
border-radius:4px;
height:40px;
clear:both;
overflow: hidden;
}
.image {
background: url("url here");
background-position: center center;
background-size: cover;
opacity: 0.3;
height: 39px;
margin: -10px;
width: 300px;
position:absolute;
right: 10px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 0;
}
しかし、div要素として、それがなくても、それに示す画像を持つことが可能ですdiv1の中に? :after
、:before
などを使用していますか? div1の右側にdiv image
が表示され、Xの幅にしたいだけです。
達成しようとしている効果のイメージがありますか? –
はい、可能です。 – Terry
@Paulie_D http://prntscr.com/cvg7e3 –