[css3】background属性の8つの属性値について解説(インタビュー記事)
2022-02-03 13:02:49
CSSにおけるbackgroundのプロパティ値
- 背景色
- 背景画像
- バックグラウンドリピート
- 背景位置
- 背景アタッチメント
合成属性:background:background-color background-image background -repeat background-position background-attachment
CSS3 new:composite属性でbackgroundを使用できないもの
背景サイズ、背景オリジン、背景クリップ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.pic{
width: 300px;
height:400px;
border: 20px dashed aqua;
padding: 30px;
/* background-color:#f90;
background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603882574342&di=e
fe3283a838eef10140bcab16bf06371&imgtype=0&src=http%3A%2F%2Fdpic.tikong.com%2F8i%2Fzu%2FQJ6411171137.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-attachment: fixed; */
background:#f90 url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603882574342&di=e
fe3283a838eef10140bcab16bf06371&imgtype=0&src=http%3A%2F%2Fdpic.tikong.com%2F8i%2Fzu%2FQJ6411171137.jpg)
no-repeat 50% 50% fixed;
background-size: 100px 100px;
background-origin: border-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="pic"></div>
</body>
</html>
今回の記事は、background属性の8つの属性(面接の質問)についての記事です。background属性については、スクリプトハウスの過去記事を検索していただくか、引き続き下記の関連記事を閲覧してください。
関連
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル】 css border add four corners コード
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[css3]ピュアCSS3によるネオンライト効果
-
cssにおけるpx, em, rem, ptの特徴や違い、変換の詳細について
-
[css3]水平方向のプログレスバーの最後にテキストを表示するCSSコード
-
[CSSレイアウト例】6種類の適応的な2カラムレイアウトを実現するCSS
-
[css3]css3 use transform to create walking 2D clock.
-
[css3]css3は、最初と最後のテキスト実行例を実現するためのコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】CSSのトリッキーなグラデーションで高度な背景光アニメーションの感覚を実現
-
[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】ボックス内の複数要素を両端揃えの効果で実現するCSS
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[css3]CSS3アニメーションによる光のボタンの流れの効果
-
[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS
-
[CSSチュートリアル】CSS clear float clear:both サンプルコード
-
左上または右上にリマインダーのドットを表示するCSS3サンプルコード[CSSチュートリアル