CSS背景及应用

2021-01-15 09:35:29 阅读：122 来源： 互联网

标签：repeat 应用 .. 背景 image 背景图片 background CSS

CSS背景及应用内容总览：

背景图片（image）
背景平铺（repeat）
背景位置（position）
背景附着
背景简写
背景透明（CSS3）
背景缩放（CSS3）
多背景（CSS3）
凹凸文字

背景图片（image）

background-image：默认值为none，表示背景上没有放任何图像；若要放置图片，需要设置URL属性，格式如下：

background-image: url(图片路径);

示例1

<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
          div {
               background-image: url(../../../assets/yangzi.jpeg);
          }
     </style>
</head>

注意：background-image 不能继承。事实上，所有背景属性都不能继承。

背景平铺（重复）（repeat）

在页面中对背景图片进行平铺，即对同一张图片进行重复放置使类似与div的盒子（有一定宽高的）内部的位置被填满。
repeat-x ：在水平方向上重复平铺图片
repeat-y ：在垂直方向上重复平铺图片
no-repeat ：则不允许图像在任何方向上平铺

示例2

<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
          div {
               width: 1000px;
               height: 600px;
               background-color: violet;
               background-image: url(../../../assets/yangzi.jpeg);
               background-repeat: repeat-x;
          }
     </style>
</head>

页面效果如下：

背景位置（position）

background-position：left top；背景图片默认是在坐上角，如上面示例2所示；
用来更改背景图片的位置；属性值有 top | center | bottom | left | right；
如果background-position中的值只写一个，另外一个值默认为center；两个值的位置交换后效果一样；即background-position：left top；和 background-position：top left；效果相同

背景附着

background-attachment：设置或检索背景图片是随对象内容滚动还是固定的。
scroll：背景图片是随对象内容滚动
fixed：背景图片固定不动

背景简写

background：属性值的顺序官方并没有强制标准。为了可读性，建议大家写成下面的格式；
background:背景颜色背景图片地址背景平铺背景滚动背景位置;

背景透明（CSS3）

CSS3支持背景半透明的写法，与颜色color的半透明写法相同；格式如下:

background：rgba(r,g,b,a)
<!-- a 为alpha 透明的意思，取值为 0~1之间； -->

注意：背景背景半透明并不影响盒子里面的内容；

背景缩放（CSS3）

background-size：设置背景图片的尺寸。参数如下
可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）；
设置为cover时，会自动调整缩放比例，保证图片始终完整显示在背景区域，如有溢出部分则会被隐藏；
设置为contain时，会自动调整缩放比例，保证图片始终完整显示在背景区域，但可能会有一部分裸漏区域；

background-size: 宽度 高度;

注意：尽量只改一个值，另一个值会等比例缩放。

多背景（CSS3）

以逗号（,）分隔开，可以设置多背景，可用于自适应布局。格式如下

background-image: url(图片1地址), 图片2地址, 、、、;
或
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置,
　　　　　　背景颜色 背景图片地址 背景平铺 背景滚动 背景位置,
　　　　　　、、、;

凹凸文字

利用阴影属性text-shadow实现；可以在text-shadow中添加多个值。格式如下：

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色，
　　　　　　　　水平位置 垂直位置 模糊距离 阴影颜色，
　　　　　　　　、、、；

文本的装饰

text-decoration：通常我们用于给链接修改装饰效果

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。

总示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <style>
          div {
               width: 1000px;
               height: 600px;
               /* background-color：背景颜色 */
               /* background-color: violet; */
               /* background-image：背景图片 */
               /* background-image: url(../../../assets/yangzi.jpeg); */
               /* background-repeat：背景平铺（重复） */
               /* background-repeat: no-repeat; */
               /* background-position：背景位置 */
               /* background-position: right bottom; */
               /* background-attachment：背景附着 */
               /* background-attachment: scroll; */

               /* background：背景简写    等价于以上五句*/
               background: hotpink url(../../../assets/yangzi.jpeg) no-repeat fixed left top;
               
               /* background-size：图片缩放 */
               background-size: 800px;
          }

          /* 背景透明 */
          .rgba {
               width: 1000px;
               height: 100px;
               background: rgba(0, 0, 0, 0.3);
          }

          /* 凹凸文字：text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
          .text-shadow{
               width: 1200px;
               height: 200px;
               background-color:#ccc;
          }
          span.tu{
               font: 700 100px "微软雅黑";
               color:#ccc;
               text-shadow: 3px 3px 3px #000,-5px -5px 3px #fff;
          }
          span.ao{
               font: 700 80px "微软雅黑";
               color:#ccc;
               text-shadow: -5px -5px 3px #000,3px 3px 3px #fff;
          }
          
     </style>
</head>
<body>
     <div>
          <div class="rgba"></div>
     </div>
     <br/><br/>
     <div class="text-shadow">
          <span class="tu">我是凸起文字&nbsp;&nbsp;</span>
          <span class="ao">我是凹下文字</span>
     </div>
</body>
</html>

View Code

页面效果如下：

标签：repeat,应用,..,背景,image,背景图片,background,CSS
来源： https://www.cnblogs.com/Chestnut-g/p/14280469.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS背景及应用