回答:
ここにあります：
.background {
background:url('../img/bg/diagonalnoise.png');
position: relative;
}
.layer {
background-color: rgba(248, 247, 216, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
このためのHTML：
<div class="background">
<div class="layer">
</div>
</div>
もちろん、.backgroundクラス内に他の要素がない場合は、クラスの幅と高さを定義する必要があります
これは非常に古いスレッドであることは知っていますが、Googleの上部に表示されるため、別の方法を紹介します。
これは純粋なCSSであり、追加のHTMLを必要としません。
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);ボックスシャドウ機能には、驚くほど多くの用途があります。
box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2)。
CSS-Tricksから... z-indexingと疑似要素を追加せずにこれを行う1つのステップの方法があります-線形グラデーションが必要です、つまりCSS3サポートが必要だと思います
.tinted-image {
background-image:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* your image */
url(image.jpg);
}
background-size:cover;をbackground-position:center center;設定しました。これはその効果をキャンセルするようです。
線形グラデーションと画像を使用することもできます：http : //codepen.io/anon/pen/RPweox
.background{
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url('http://www.imageurl.com');
}
これは、線形グラデーション関数が背景スタックに追加される画像を作成するためです。https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
次に、bg画像を含むラッピング要素と、その中にbg色を含むcontent要素が必要です。
<div id="Wrapper">
<div id="Content">
<!-- content here -->
</div>
</div>
そしてCSS：
#Wrapper{
background:url(../img/bg/diagonalnoise.png);
width:300px;
height:300px;
}
#Content{
background-color:rgba(248,247,216,0.7);
width:100%;
height:100%;
}
これを試して。私のために働く。
.background {
background-image: url(images/images.jpg);
display: block;
position: relative;
}
.background::after {
content: "";
background: rgba(45, 88, 35, 0.7);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.background > * {
z-index: 10;
}
私はこれを画像にカラーティントとグラデーションの両方を適用する方法として使用し、画像のカラープロファイルを制御できない場合にダイナミックオーバーレイテキストを読みやすくするためのスタイルを設定しやすくしました。z-indexについて心配する必要はありません。
HTML
<div class="background-image"></div>SASS
.background-image {
background: url('../img/bg/diagonalnoise.png') repeat;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(248, 247, 216, 0.7);
}
}
CSS
.background-image {
background: url('../img/bg/diagonalnoise.png') repeat;
}
.background-image:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(248, 247, 216, 0.7);
}
それが役に立てば幸い
divが少なくとも次の位置にあることを確認してください：relative
可能な解決策の包括的な概要については、https：//stackoverflow.com/a/18471979/193494で私の回答を参照してください。
なぜそんなに複雑なのですか？パターンが透明になり、背景色が塗りつぶされやすくなることを除いて、ソリューションはほぼ適切でした。PNGには透明度を含めることができます。フォトショップを使用して、レイヤーを70％に設定し、画像を再保存して、パターンを透明にします。その場合、必要なセレクタは1つだけです。クロスブラウザで動作します。
CSS：
.background {
background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
background-color: rgb(248, 247, 216);
}HTML：
<div class="background">
...
</div> これが基本です。私は切り替えどこ使用例は、以下backgroundのbackground-image両方の性質は同じように動作します。
body { margin: 0; }
div {
height: 110px !important;
padding: 1em;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: white;
text-shadow: 0 0 2px #333;
}
.background {
background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
}
.col-one {
background-color: rgb(255, 255, 0);
}
.col-two {
background-color: rgb(0, 255, 255);
}
.col-three {
background-color: rgb(0, 255, 0);
}<div class="background col-one">
1. Background
</div>
<div class="background col-two">
2. Background
</div>
<div class="background col-three">
3. Background
</div> ちょっと待ってください！外部パターンの読み込みに時間がかかります。
このウェブサイトはかなり遅いようです...
:hover、背景色を適用して、背景画像の上にオーバーレイできますか？
あなたは、たとえば生成することができ、半透明ピクセル、使用することができ、ここにも、BASE64でここで白50％の例であります：
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;アップロードせずに
追加のHTMLなし
読み込みはボックスシャドウや線形グラデーションよりも速くなると思います
これは、CSSのみを使用したより単純なトリックです。
<div class="background"> </div>
<style>
.background {
position:relative;
height:50px;
background-color: rgba(248, 247, 216, 0.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC);
}
.background:after {
content:" ";
background-color:inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>インラインオーバーレイ画像としてSVGを使用するもう1つ（注：#svg-code内で使用する場合は、それをurlencodeする必要があります！）：
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
no-repeat center center/cover,
url('overlayed-image.jpg') no-repeat center center/cover;私は単に使用背景画像の対象背景のdivにCSSプロパティを。
background-imageはグラデーションカラー関数のみを受け入れることに注意してください。
したがって、線形グラデーションを使用して同じ目的のオーバーレイカラーを2回追加しました（最後のRGBA値を使用して、色の不透明度を制御します）。
また、次の2つの有用なリソースが見つかりました。
HTML
<div class="header_div">
</div>
<div class="header_text">
<h1>Header Text</h1>
</div>CSS
.header_div {
position: relative;
text-align: cover;
min-height: 90vh;
margin-top: 5vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
filter: blur(2px);
}
.header_text {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
}オーバーレイの色に不透明度を追加することもできます。
する代わりに
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);できるよ：
background: url('../img/bg/diagonalnoise.png');次に、不透明色の新しいスタイルを作成します。
.colorStyle{
background-color: rgba(248, 247, 216, 0.7);
opacity: 0.8;
}不透明度を1未満の任意の数に変更します。次に、このカラースタイルを画像と同じサイズにします。うまくいくはずです。