背景の一部だけ色をつけたい場合のCSSスタイルシートの書き方
ブロック全体に背景色を付けるのではなく、ブロックの一部にだけ色をつけたい、という状況があったので、方法を考えてみた。
目的:
こんな感じで、青い背景を灰色のブロックの全体ではなく、左側だけに表示したい。
2017/08/16追記
@oreoさんから紹介していただきましたが以下の方法で簡単に実現できました。
CSSの線形グラデーション(linear-gradient)
https://codepen.io/oreo/pen/jLabE
手っ取り早く動作確認したい方はこちら
やりかた
例えば、以下の図のようにブロックの左側に色をつけたい場合の指定方法。
containerというクラスの中に、background-blueという青の背景色を担当する要素とcontentsというメインのブロックがある。
背景担当のbackground-blueはabsoluteにしてcontentsと重なるようにすると、実現できる。
html
<div class="container">
<div class="background-blue">
</div>
<div class="contents">
<div>左より文字</div>
<p>メイン コンテンツ</p>
</div>
</div>
css
.container {
position: relative;
width: 200px;
height: 300px;
background: #dddddd;
}
.background-blue {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
background: #999;
}
.contents {
position: relative;
}
Author And Source
この問題について(背景の一部だけ色をつけたい場合のCSSスタイルシートの書き方), 我々は、より多くの情報をここで見つけました https://qiita.com/umeneri/items/4c76981eb0f1991493b0著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .