ホームページ > 記事 > ウェブフロントエンド > CSSで背景を制御する方法について共有します

CSSで背景を制御する方法について共有します

不言オリジナル: 2018-06-20 11:55:172305ブラウズ

この記事では主にCSSコントロールの背景の例を紹介します。CSSで背景画像を設定し、背景色を設定する方法を説明します。

1.背景色を設定します。 hex 作った背景色: #ff0000;英語名background-color:red;

三原色background-color:rgb(255,0,0)

透明background-color:transparent;Transparent

<style type="text/css">
h1{ background-color:rgb(255,0,0);}
</style>
</head></p>
<p><body>
    <h1>李克强主持召开<span>国务院</span>常务会议</h1>
</body>

二番目に設定背景画像:

1. 背景画像を導入します:background-imageURLbackground-image:url("bg.jpg")

none は背景画像を設定しません

2. 背景のタイリング方法を設定します。画像：background-repeat
repeat will 背景パターンが背景全体を塗りつぶします。

repeat-x は背景パターンを水平方向に塗りつぶします。

repeat-y は背景パターンを垂直方向に塗りつぶします。
リピートなしのパターンは 1 回のみ表示されます。

3. 背景画像の位置を設定します:background-position
左上左上に表示される背景パターンを設定します。

上部中央は、上部中央に表示される背景パターンを設定します。

右上右上に表示される背景パターンを設定します。
中央左は、中央左に表示される背景パターンを設定します。
center center は、IE の中央に表示される背景パターンを設定します。
中央右中央右に表示される背景パターンを設定します。
左下は、左下に表示される背景パターンを設定します。
bottom は、真下に表示される背景パターンを設定します。
右下右下に表示される背景パターンを設定します。

座標 (x, y) x 水平位置 y 垂直位置を通じて画像の位置を正確に特定することもできます。単位はピクセル (px) です。

4. ウィンドウのスクロールに合わせて背景画像もスクロールするかどうかを設定します。 -attachment

scroll は、ウィンドウのスクロールバーの動きに合わせて背景画像が移動するように設定します (デフォルト)。

ウィンドウのスクロールバーの動きに合わせて背景画像が動かない問題を修正しました。

背景パターンの簡略化された形式: カラー背景画像の繰り返し添付位置

<style type="text/css">
body{
background-image:url(fads.png);
background-repeat:no-repeat;
background-position:center right;
background-attachment:fixed;</p>
<p>/*background:url(fads.png) no-repeat fixed center right;  简化方案*/
}
</style>
</head>
<body>
<p>48、完美的男友：不吸烟，不喝酒，不欺骗。不存在！</p> 
<p>49、人生就像一块破铜烂铁，把它扔进火里，敲敲打打，也能炼出一副精品！</p> 
<p>50、话说动物园有一只猴子，奇丑无比，人见人吐！第二天我去看了，我吐了！第三天你去了，猴子吐了！</p>
<p>25、哥是文明人，所有脏话均已使用唾液消毒。  
</p>
<p>26、名人名言，你得先是名人了那才是名言，别人的屁都是名屁！你能比吗？  
</p>
<p>27、您都好意思撒谎了，我哪敢好意思不信呢？  
</p>
<p>28、为什么我眼里常含眼屎，那是我对睡眠爱的深沉。   
</p>
<p>29、别以为你比我年轻，你就能多蹦跶几天，棺材装的是死人不是老人！  
</p>
<p>30、我是穷人，请勿盗墓！</p>
<p> 31、有时候老天下一场雨，是因为世界需要洗一洗；有时候眼睛下雨了，是因为心需要洗一洗！  
</p>
<p>32、站在岁月的岸边，向自己的过往打个水漂吧……</p>
<p>33、2011我娶你，2012我保护你，2013爱你一生，2014爱你一世！  </p>
<p>34、人生就像一场旅行，在乎的不是目的地。而是沿途的"SB"，以及对付"SB"时的心情！  </p>
<p>35、臭男人都喜欢骚女人。</p>
<p> 36、系好安全带，前方也许有场爱情正等着你。  </p>
<p>37、枕着打印机睡，就能打印出一整夜的梦吧？  </p>
<p>38、没有强大的主人，别以为你是狗就可以乱咬人！</p>
<p> 39、我只顾着往后看，却没有在意前面的路有多长。  </p>
<p>40、最近神马开始变驴腿了，浮云变雨水了！</p>
<p> 41、昨天是历史，今天是开始，明天谁都不好使！  </p>
<p>42、还是10086对我好，我给他发一条对短信，他给我回3条。  </p>
<p>43、靠山吃山，靠水吃水，今天抢劫，不许不给，谁要反抗，让他见鬼。  </p>
<p>44、今天MM的生日，为了第一个送上祝福，凌晨我准时拿起手机发了一条信息：沙发。  </p>
<p>45、知道高晓松为啥喝醉酒不？那是因为药家鑫想让他唱一首"同牢的你"。</p>
<p> 46、地铁上的广告：挤吗？买辆车吧！出租车上的广告：赌吗？坐地铁吧！靠，忽悠我还是怎么着！  </p>
<p>47、一般般的我，一般般的亮。一般般的你，我看不上！</p>
</body>

<style type="text/css">
p{
width:800px;
height:600px;
background-color:#ccc;
background-image:url(fads.png);
background-repeat:no-repeat;
background-position:topright;
/*background-attachment:fixed;当给一个p设置背景是使用该属性有可能无效*/</p>
<p>/*background:url(fads.png)no-repeatfixedcenterright;简化方案*/
}
</style>
</head>
<body>
<p>
<p>35、臭男人都喜欢骚女人。</p>
<p>36、系好安全带，前方也许有场爱情正等着你。</p>
<p>37、枕着打印机睡，就能打印出一整夜的梦吧？</p>
<p>38、没有强大的主人，别以为你是狗就可以乱咬人！</p>
<p>39、我只顾着往后看，却没有在意前面的路有多长。</p>
<p>40、最近神马开始变驴腿了，浮云变雨水了！</p>
<p>41、昨天是历史，今天是开始，明天谁都不好使！</p>
<p>42、还是10086对我好，我给他发一条对短信，他给我回3条。</p>
<p>43、靠山吃山，靠水吃水，今天抢劫，不许不给，谁要反抗，让他见鬼。</p>
<p>44、今天MM的生日，为了第一个送上祝福，凌晨我准时拿起手机发了一条信息：沙发。</p>
<p>45、知道高晓松为啥喝醉酒不？那是因为药家鑫想让他唱一首"同牢的你"。</p>
<p>46、地铁上的广告：挤吗？买辆车吧！出租车上的广告：赌吗？坐地铁吧！靠，忽悠我还是怎么着！</p>
<p>47、一般般的我，一般般的亮。一般般的你，我看不上！</p>
</p>
</body>

3 つの演習:

1. テキストのローカル領域のテキストをより適切に制御するには、display 属性を使用します

<span>文本内容</span>
<styletype="text/css">
pspan{background:red}
</style>
</head>
<body>
<p>
35、臭男人都<span>喜欢</span>骚女人。
</p>

2.変換

<styletype="text/css">
span{
color:#0C0;
width:100px;
height:100px;
background-color:#900;
display:block;/*内联转换为区块*/
}
p{
background-color:#F63;
width:300px;
height:50px;
display:inline;/*区块转换为内联，width和height的属性就无效了*/
}
</style>
</head>
<body>
<span>使用span更好的控制文本中局部区域的文本</span>
<br/>
<!--使用display属性提供区块转换--inline,block,none(不占位的隐藏)内联标记设置长宽高没效果-->
<span>使用display属性提供区块转换</span>
<p>使用display属性提供区块转换</p>
</body>

3. タイトルに小さなアイコンを追加します (アイコンを追加するには背景を使用するのが最適です)

<styletype="text/css">
h5{
background:url(das.gif)no-repeatleftcenter;
padding-left:20px;
}
</style>
</head>
<body>
<h5>给我加个小图标吧</h5>
</body>

以上が、皆様の学習に役立つことを願っています。関連コンテンツについては、PHP 中国語 Web サイトにご注意ください。

CSSで背景を制御する方法について共有します

関連記事