背景画像と不透明度を同じプロパティで設定できますか？

264

私は、CSSの参考文献に見ることができる画像透明度を設定する方法とどのように背景画像を設定する方法を。しかし、これらの2つを組み合わせて透明な背景画像を設定するにはどうすればよいですか？

背景として使用したい画像がありますが、明るすぎます。不透明度を約0.2に下げたいのですが。これどうやってするの？

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}
css 
— AP257
ソース

回答:

133

2つの方法：

  1. PNGに変換し、元の画像を不透明度0.2にする
  2. （より良い方法）の前に、と同じ高さのa <div>があり、背景画像とを適用します。position: absolute;#main#mainopacity: 0.2; filter: alpha(opacity=20);
— ニート・ザ・ダーク・アブソル
ソース
うん、PNGの大きな問題はサイズです。本当に大きくなる可能性があります。これでopacity: ...、すべてのブラウザーで指定できるようになりました。
— Alexis Wilke 2017
1
あなたがPNGから何を絞り出すことができるかに驚かれることでしょう。たとえば、0.2の不透明度では、多くの詳細を選択することはおそらくないので、Indexed-PNGに変換できます。私は実際に自分のウェブサイトでこれを使用しており、1920x1080の背景画像を250kb未満に圧縮します。
— Niet the Dark Absol 2017
オーバーレイの上でボトムを使用できるようにするには、その位置：絶対にz-index：-1を追加することをお勧めします。いい答えだ。
— Raz
1
WebPを使用することもできます-WebPは透明度をサポートし、ファイルサイズはPNGよりもはるかに小さくなります。Safariを除くすべての主要ブラウザがWebPをサポートするようになりました。WebPをサポートするブラウザーに、PNGをSafariに提供できます。
— Dan Roberts、
364 
#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}
— ダンイーストウェル
ソース
4
IE8から生成されたコンテンツ。caniuse.com/#feat=css-gencontent、IE8のフィルタープロパティを使用します。caniuse.com/#search=opacity
— Dan Eastwell
3
CSSに「z-index：-1」を追加しました。そうすることで、背景画像は#mainの残りのコンテンツではなく、不透明度の影響を受けます
— patrick
17
私は使用:beforeの代わりに:after、その後、私はを改ざんする必要はありませんz-indexので、:before自動的に主な内容以下の終了まで。（現在ChromeとFFでテスト済み）
— KajMagnus 2015年
1
@KajMagnusそれを行うと、その後のすべては表示されません。不透明度を1.0にしてみてください。意味がわかります。
— ジェシカ
1
繰り返し背景画像を取得している場合は、#main：after {...}background-repeat: no-repeat; background-attachment: fixed; background-position: center;内に追加する必要がある場合があります。
— ban-geoengineering 2017年
106

1 divで透明なイメージがないソリューション：

マルチバックグラウンドCSS3機能を使用して、2つの背景を配置できます。1つは画像付き、もう1つは透明パネル付きです（背景画像の不透明度を直接設定する方法はないと思います）。

background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;

rgba(255,255,255,0.5)単独で使用できるのは裏側だけなので、使用できません。この例では、ブラウザーごとに生成されたグラデーションを使用しました（これが非常に長い理由です）。ただし、コンセプトは次のとおりです。

background: tranparentColor, url("myImage");

http://jsfiddle.net/pBVsD/1/

— 木材
ソース
これは、背景が無地である場合にのみ機能し、背景であるPNG24があり、不透明性（ホバー時など）を必要とする場合、これは機能せず、疑似要素メソッドを使用する必要があります。これは、IE 8以降で使用できるため、実際には優れています。
— vsync 2014
66

シンプルなソリューション

グラデーションを背景画像のみに設定する必要がある場合：

background-image: url(IMAGE_URL); /* fallback for older browsers */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(IMAGE_URL);
— フランチェスコ・ボルジ
ソース
画像が少し上に移動します。修正はありますか？
— HFR1994 16
6
RGBA 255,255,255 background-imageを使用することもできます：linear-gradient（to bottom、rgba（255,255,255,0.6）0％、rgba（255,255,255,0.6）100％）、url（IMAGE_URL）;
— ローマ
@Roman rgba色コンポーネントを、要素またはその埋め込み親でbackground-colorとして使用される値に設定できます（Chrome 58.0.3029.81、Edge 38.14393.0.0でテスト済み）。
— 折りたたみ式2017
46

私はこれを見て、CSS3でこのようにコードを配置できるようになりました。背景全体をカバーしたい場合は、次のようにします。次に、hsla(0,0%,100%,0.70)またはrgbaを使用して、白の背景に飽和または不透明度のパーセンテージを設定し、希望の外観を取得します。 

.body{
    background-attachment: fixed;
    background-image: url(../images/Store1.jpeg);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: hsla(0,0%,100%,0.70);
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}
— ナサニエルヘルム
ソース
2
background-colorとbackground-blend-modeを追加するとうまくいきました。今、私はその子供に影響を与えない不透明度のdivを持っています！
— ディエゴビクターデジーザス
1
これは素晴らしい！スクロール時に不透明度を変更するjquery関数を作成し、下にスクロールすると背景画像の上に色を作成しました。$（function（）{$（window）.scroll（function（）{var scroll = $（window）.scrollTop（）; var current = 0; var now =（current-scroll）/ 7; $（ '。slide '）.css（' background-position '、'50％' + now + 'px'）; var color = Math.round（scroll / 7）/ 100; $（ '。slide'）。css（ 'background- color '、' rgba（128、45、87、 '+ color +'） '）;}）;}）;
— drooh
10

これを実現するには、CSS疑似セレクタ:: afterを使用できます。これが実際のデモです。

ここに画像の説明を入力してください

.bg-container{
  width: 100%;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.bg-container .content{
  position: absolute;
  z-index:999;
  text-align: center;
  width: 100%;
}
.bg-container::after{
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index:-99;
  background-image: url(https://i.stack.imgur.com/Hp53k.jpg);
  background-size: cover;
  opacity: 0.4;
}
<div class="bg-container">
   <div class="content">
     <h1>Background Opacity 0.4</h1>
   </div>
</div>
スニペットを展開

— ハリダス
ソース
4

同様の問題がありました。画像があり、透明度を下げて、画像の背景に黒い背景を入れたいと思っていました。不透明度を減らしたり、黒い背景や二次的なdivを作成したりする代わりに、線形グラデーションをすべて1行の画像に設定しました。

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url("/img/picture.png");
スニペットを展開

— matteo_dm
ソース
3

@Dan Eastwellの回答を使用しましたが、非常にうまく機能します。コードは彼のコードに似ていますが、いくつか追加されています。

.granddata {
    position: relative;
    margin-left :0.5%;
    margin-right :0.5%;
}
.granddata:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("/Images/blabla.jpg");
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
}
— エルカメルーン人
ソース
2

単純な画像に対してそれを行うための優れた方法は、CSSのみを使用してHTML要素の背景を設定することです。

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
}
スニペットを展開

派手なを取得し、その不透明度を設定する場合は、IE9 + *で、ボディの透明な背景色を設定できます。これは、半透明の白をオーバーレイして画像を白くし、明るく見えるようにすることで機能します。たとえば、不透明度75％の白（rgba(255,255,255,.75)）は、次の効果を生成します。

HTML {
  background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  background: rgba(255, 255, 255, .75);
}
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing.
  Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus.
  Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla
  et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos,
  massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl
  nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet
  porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris
  purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum
  lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient,
  imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
スニペットを展開

  • ヒント：position: relative本文はであるのに対し、HTMLはであることに注意してくださいposition: absolute。これは、本文の背景色が本文の蛍光ペンのように振る舞わないようにするためです。

これは、ボディのRGBA色の背景を変更することにより、CSSフィルターに匹敵しますが、非常に異なるものに拡張することもできます。たとえばrgba(0,255,0,.75)、コードスニペットで確認できるように、非常に緑の色合いを作成します。

HTML {
    background: url('http://www.earthtimes.org/newsimage/eat-lead-by-example-obesity-expert-tells-parents_139.jpg');
    width: 100%;
    height: 100%;
    position: relative;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(0,255,0,.75);
}
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
スニペットを展開

  • ヒント： RGBAはR ed G reen B lue A lphaに対応しています。したがって、ブラウザはにrgba(0,255,0,.75)例示されているものとして解釈し{red:0, green:255, blue:0, alpha:'75%'}ます。


*完全な互換性の表は、Can I Useにあります。ただし、IE9がサポートしていることを確認するには、[すべて表示]をクリックする必要があることにも注意してください。


補遺

質問には既に回答しましたが、追加したいことがまだあるので、このセクションの補遺にタイトルを付け、役立つ可能性のある情報を追加するようにしています。したがって、上記のコンテンツをさらに推定するために、SVGを背景画像として使用して、邪悪な驚くべきことを行うことができます。たとえば、以下のbase64でエンコードされたSVGの例でわかるように、クールなWebサイトアイコンを備えたロード画面の背景を作成できます。

HTML {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiIgYXJpYS1oaWRkZW49InRydWUiPjxnIGlkPSJrIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VHJhbnNmb3JtPSJyb3RhdGUoLTEyMCkiIHRyYW5zZm9ybS1vcmlnaW49Ii41LjUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI0NyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjYpIi8+PHN0b3Agb2Zmc2V0PSI1MyUiIHN0b3AtY29sb3I9InJnYmEoMCwwLDAsLjMpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDAsMCwwLC45KSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9ImdyYWRpZW50VHJhbnNmb3JtIiBhdHRyaWJ1dGVUeXBlPSJYTUwiIHR5cGU9InJvdGF0ZSIgZHVyPSI3MDAwbXMiIGZyb209IjAiIHRvPSIzNjAiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9saW5lYXJHcmFkaWVudD48cmFkaWFsR3JhZGllbnQgaWQ9ImQiIHI9Ii41IiBjeT0iLjUiIGN4PSIuNSI+PHN0b3Agb2Zmc2V0PSIzNSUiIHN0b3AtY29sb3I9ImJsYWNrIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9ImdyZXkiLz48c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iYmxhY2siLz48L3JhZGlhbEdyYWRpZW50PjxyYWRpYWxHcmFkaWVudCBpZD0iZSIgcj0iLjUiIGN5PSIuNSIgY3g9Ii41Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSJ5ZWxsb3ciLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0ieWVsbG93Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPjwvcmFkaWFsR3JhZGllbnQ+PGNsaXBQYXRoIGlkPSJmIj48cGF0aCBzdHJva2U9ImdyZXkiIHN0cm9rZS13aWR0aD0iLjAxIiBpZD0iYiIgZD0iTS43NS43MUEuMzEuMzEgMCAxIDEgLjc1LjMxTC42OS4zOEEuMjIuMjIgMCAxIDAgLjY4LjY2TC41Ni41N0wuNi41MUwuODIuNjh6TS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6TS41NS41OEEuMDcuMDcgMCAxIDEgLjU2LjQ2TC42LjQzQS4xMi4xMiAwIDEgMCAuNTkuNjF6Ii8+PC9jbGlwUGF0aD48Y2xpcFBhdGggaWQ9ImciPjxwYXRoIHN0cm9rZT0iZ3JleSIgZmlsbD0icmVkIiBzdHJva2Utd2lkdGg9Ii4wMSIgZD0iTS42LjYzQS4xNC4xNCAwIDEgMSAuNjIuNDJMLjY2LjM5QS4xOS4xOSAwIDEgMCAuNjQuNjZ6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PGcgY2xpcC1wYXRoPSJ1cmwoI2YpIiBmaWxsPSJ1cmwoI2MpIj48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIi8+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0icmVkIiBjbGlwLXBhdGg9InVybCgjZykiLz48L2c+PGcgdHJhbnNmb3JtPSJzY2FsZSgxLjEpIiB0cmFuc2Zvcm0tb3JpZ2luPSIuNS41Ij48dGV4dD48dGV4dFBhdGggaHJlZj0iI2IiIGZvbnQtc2l6ZT0iLjY1JSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgbGV0dGVyLXNwYWNpbmc9Ii0uNSUiIHN0eWxlPSJ3aGl0ZS1zcGFjZTpwcmUiPiBZT1VSIDx0c3BhbiBmaWxsPSJyZWQiPkVYQU1QTEUgV0VCU0lURTwvdHNwYW4+IExPR088L3RleHRQYXRoPjwvdGV4dD48L2c+PC9nPjwvc3ZnPg==');
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
}
body {
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    background: rgba(255,255,255,.5);
}
<p>Condimentum eget. Sem elementum a et mauris sem a, velit justo consectetuer in turpis mauris, sit sed elit cum, fusce suspendisse pretium dictum, mattis dui tortor tellus. Volutpat ut ante lorem nec laoreet aliquam, lorem est magna amet, integer mauris purus tellus. Porta enim repellendus aliquam eros. Turpis posuere elementum suscipit wisi lobortis, nec nunc consequat dictum ut unde at, mi lorem amet nunc. Cubilia pede, integer dolor, eget platea felis elit enim rhoncus, integer proin quam in ipsum lorem, diam curabitur netus pretium pellentesque. Donec rutrum ultrices placerat, curabitur maecenas, feugiat pede varius accumsan quam lorem, dui et dictumst asperiores nulla, vivamus urna nam leo libero. Posuere non convallis amet justo parturient, imperdiet consectetuer arcu praesent cursus risus, quis pretium dolor.</p>
<p>Lorem ipsum dolor sit amet, et id, maecenas a convallis, elit facilisi congue augue id ac. Suscipit luctus egestas rutrum, amet tincidunt porttitor ante convallis magna, vivamus amet at turpis, ante lacinia blandit vel metus mauris rutrum. Ipsum nam adipiscing. Est sapien quis sem vestibulum, quis cubilia turpis, suspendisse mattis vehicula enim risus pede, placerat suspendisse dui. Convallis nostrud pede, mollit lobortis, ornare ipsum tempor faucibus tortor, vel pede, porttitor nulla nonummy vestibulum purus. Eros placerat tenetur augue ipsum aliquam, pellentesque congue condimentum sed vitae lectus.</p>
<p>Aliquam venenatis curabitur pellentesque sociosqu quam. Tincidunt id erat vestibulum in, est fermentum ipsum et augue, nascetur etiam. Lorem elit, sed donec, leo vivamus ac id enim faucibus vel. Nullam sit feugiat sed massa consectetuer auctor, nulla et erat lacinia nec, eget ut ante nullam est non in, elit porttitor in in donec eget porttitor. Interdum ultricies sem morbi facilisis nibh erat. Id suspendisse, sed tincidunt fringilla sit, sapien odio vel, at culpa augue sed taciti neque inceptos, massa class non. Vel tristique condimentum at pellentesque, commodo nulla sagittis rhoncus lorem. Viverra maecenas tellus pretium urna mauris proin, vel libero morbi, ante volutpat vestibulum augue. Itaque leo mauris turpis, vivamus nisl congue nisl nulla in turpis, eget vitae accumsan dolor ipsum leo venenatis, feugiat vehicula in risus, donec eu pede vivamus itaque nam. Justo amet vitae pellentesque sed, posuere fusce sapien, sed nam placerat libero sed etiam curabitur, suspendisse justo, amet porttitor.</p>
スニペットを展開

  • ヒント：background-size: cover CSSは、バックグラウンドでSVGのロゴは、HTML要素のサイズにリサイズされます。
— 3.1415926535897932384626433833
ソース
1

CSSに追加...

 filter: opacity(50%);

JavaScriptでの使用...

 element.style.filter='opacity(50%)';

注：必要に応じてベンダープレフィックスを追加しますが、Chromiumはなくても問題ありません。

— Coder42
ソース
0

まあ、背景の透明度のみを行う唯一のCSSの方法はviaですRGBaが、画像を使用したいので、PhotoshopまたはGimpを使用して画像を透明にしてから背景として使用することをお勧めします。

これは不正解opactiy: 1;です。RGBaだけでなく、CSS3宣言があります。
— カイル
4
彼が言っているのはbackground-image、コンテナーにopacityスタイルを設定してから、同じ要素にスタイルを設定することです。これにより、その要素のテキストやその他のコンテンツも透明になります。私を信じないなら、これを試してください：w3schools.com/Css/tryit.asp
0

#mainにposition = absolute、top = 0、width = 100％を追加し、不透明度の値を#backgroundに設定しました

#main{height:100%;position:absolute; top:0;width:100%}
#background{//same height as main;background-image:url(image URL);opacity:0.2}

メインの前に背景をdivに適用しました。

— 怠惰な
ソース
-1

私は同じ問題を抱えていたのでこの投稿に遭遇しましたが、Photoshopで不透明度を簡単に調整できるのに、CSSを調整して値を調整し、更新を押すのはなぜですか？画像をコピーし、新しいレイヤーとして貼り付けてから、不透明度スライダーを動かします。

— MBM
ソース
2
ArtBは、最後のメモで正しく理解しました。これは、別の問題の完全な解決策です。これが適切な解決策ではない場合があり、これはその1つです。
— jon 2013
-1

同様の問題があり、Photoshopで背景画像を取り、必要な不透明度で新しい.pngを作成しました。CSSがすべてのデバイスとブラウザで機能するかどうかを心配することなく問題を解決しました

— エバレス
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.