backgroundプロパティ
backgroundの主要なプロパティ一覧
| プロパティ | 役割 |
|---|---|
| background | 背景プロパティの一括指定 |
| background-color | 背景色の指定 |
| background-image | 背景画像の指定 |
| background-position | 背景画像の位置の指定 |
| background-size | 背景画像の大きさの指定 |
| background-repeat | 背景画像の繰り返し表示の指定 |
background-colorのいろいろ
div.a {
background-color: #f30;
}
div.b {
background-color: #ff3300;
}
div.c {
background-color: rgb(255, 51, 0);
}
div.d {
background-color: rgba(255, 51, 0, 0.8);
}
#から始まる3桁または6桁の16進数のカラーコードやrgb()による10進数での背景色指定の他に、
rgba()によって透過度の指定が対応しています。
background-imageのいろいろ
グラデーションの指定
div {
background-image: linear-gradient(rgba(255, 51, 0, 0.8), rgba(255, 255, 0255, 1));
}
background-imageプロパティにlinear-gradientを使用すれば、線形グラデーションをかけることができます。
線形グラデーションに、放射・扇形グラデーションも使用できます。
radial-gradient() 放射グラデーション
div { background-image: radial-gradient(rgba(255, 51, 0, 0.8), rgba(255, 255, 0255, 1)); }
radial-gradient() 扇形グラデーション
div { background-image: conic-gradient(rgba(255, 51, 0, 0.8), rgba(255, 255, 0255, 1)); }
背景画像の複数指定
div {
background-image: url(hoge.png), url(fuga.png);
background-position: top left, right bottom;
background-repeat: no-repeat;
}
background-imageの各プロパティで、「,」カンマを区切ると複数の画像を入れることができます。
また、background-positionやbackground-size,background-repeatも「,」カンマで区切るとbackground-imageで指定した画像に対してそれぞれプロパティを当てることが出来ます。同一の場合は「,」カンマを外すことで一括指定となります。
backgroundプロパティをいろいろ使って、複雑な背景を指定する
グラデーションに水玉模様
See the Pen gOONQma by k1-web (@k1-web) on CodePen.
背景グラデーションに合わせて白い水玉模様がついてるこの背景も全てCSSでやってます。
水玉模様のドットをradial-gradient（放射グラデーション）でつくる
1.円を作る
.bg {
background-image: radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%);
}
数%ずらすことによって、画像のギザギザ感をなくし滑らかになります。
これだと中心に大きな楕円しか表示できていません。
2.サイズを調整
.bg {
background-image: radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%);
background-size: 30px 30px;
}
background-sizeを指定することによって、指定したサイズに応じた円が表示されます。
ただこのままだと余白感が開きすぎているのと、上下左右にしか繰り返していません。
ここにさらに、同じグラデーションを重ねます。
3.ドットを複数表示して重ねる。
.bg {
background-image: radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%),
radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%);
background-size: 30px 30px, 30px 30px;
}
このままだと同じ位置に重なっているので、ずらします。
4.複数表示したのをずらす。
.bg {
background-image: radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%),
radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%);
background-size: 30px 30px, 30px 30px;
background-position: 0 0, 15px 15px;
}
background-sizeの半分をずらすことによって、ななめにも繰り返し表示になります。
最後に、背景に線形グラデーションを付ける。
.bg {
background-image: radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%),
radial-gradient(rgba(255,255,255,0.7) 15%, transparent 20%),
linear-gradient(135deg, #e2ecff 0%,#e2ecff 40%,#bde7ff 60%,#bde7ff 100%);
background-size: 30px 30px, 30px 30px, 100% 100%;
background-position: 0 0, 15px 15px, center center;
}
背景はsizeを100%にすることによって全体表示に、グラデーションに水玉模様が重なった綺麗なはいけいになりました。
左右に違う色を使った吹き出し
See the Pen yLLdQRj by k1-web (@k1-web) on CodePen.
左から50%を境に色を切り分けるlinear-gradient線形グラデーションをかける
.bg {
background-image: linear-gradient(90deg, #00a0e9 50%,#ff7e00 50%);
background-size: 100% calc(100% - 30px);
background-repeat: no-repeat;
}
before,afterの疑似要素を使用し、三角をつくる
.bg {
background-image: linear-gradient(90deg, #00a0e9 50%,#ff7e00 50%);
background-image: linear-gradient(90deg, #00a0e9 50%,#ff7e00 50%);
background-size: 100% calc(100% - 30px);
background-repeat: no-repeat;
position: relative;
&::before, &::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 15px solid transparent;
position: absolute;
bottom: 0;
}
&::before {
border-right-color: #00a0e9;
border-top-color: #00a0e9;
right: 50%;
}
&::after {
border-left-color: #ff7e00;
border-top-color: #ff7e00;
left: 50%;
}
}
今後も備忘録的に更新していきます。