4

背景画像を1フレームにしたいのですが、画像を明るくする必要があります。不透明度を使用してみましたが、別のフレームの背景画像が透けて見えます。同じフレームにいくつかのテキストもありますが、そのテキストを明るくしたくありません。

私は CSS3 で書いています。これが私のコードです。

        .frameContent
     {
        background-image: url(/image/and_02.jpg); 
        background-size: 100%;
        vertical-align: top; 
        border-left: #FFFFFF 20px solid;
        border-right: #FFFFFF 20px solid;
        border-top: #FFFFFF 15px solid;
        padding: 25px 10px 10px 10px;
        height:100%;
        box-shadow: 2px 2px 2px;
    }
4

5 に答える 5

0

ネストされた要素を作成するのはどうですか?

.frame = 無地の白。.frameContent = 部分的に透明な背景

<div class="frame"><div class="frameContent">My Content here</div></div>
于 2013-07-01T08:26:56.130 に答える
0

CSS プロパティの background-opacity はありませんが、その後ろに疑似要素 (::after) を挿入することで実現できます。

.frameContent{
    position:relative;
    border-left: #FFFFFF 20px solid;
    border-right: #FFFFFF 20px solid;
    border-top: #FFFFFF 15px solid;
    padding: 25px 10px 10px 10px;
    height:100%;
    box-shadow: 2px 2px 2px;
}

.frameContent::after{
   content: "";
   background: url(/image/and_02.jpg);
   background-size:cover;
   opacity: 0.5;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
   z-index: -1;
}
于 2020-01-08T05:27:36.530 に答える