CSS 常用样式 – 背景属性

一、背景颜色 background-color

属性名：background-color
作用：在盒子区域添加背景颜色的修饰
加载区域：在 border 及以内加载背景颜色
属性值：颜色名、颜色值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 200px;

            height: 200px;

            padding: 30px;

            border: 5px dashed red;

            margin: 20px;

            background-color: slateblue;

        }

    </style>

</head>

<body>

    <div class="box"> 背景颜色 </div>

</body>

</html>

二、背景图片 background-image

属性名：background-image
作用：给盒子添加图片的背景修饰
加载范围：默认的加载到边框及以内部分。后期如果图片不重复加载，加载从 border 以内开始
属性值：url(图片路径)
url：uniform resource locator，统一资源定位符，小括号内部书写查找图片的路径

.box {

            width: 200px;

            height: 200px;

            padding: 30px;

            border: 5px dashed red;

            margin: 20px;

            /* background-color: slateblue;  背景颜色 */

            background-image: url(images/lagouwang.jpg);

        }

如果图片不重复，从 border 以内开始加载
背景图和背景颜色可以同时设置，背景图会压盖背景颜色，没有背景图的区域会显示背景颜色

三、背景重复 background-repeat

属性名：background-repeat
作用：设置添加的背景图是否要在盒子中重复进行加载
根据属性值不同，有四种重复加载方式

.box {

            width: 200px;

            height: 200px;

            padding: 30px;

            border: 5px dashed red;

            margin: 20px;

            /* background-color: slateblue;  背景颜色 */

            background-image: url(images/lagou_small.jpg);

            /* background-repeat: repeat; */

            /* background-repeat: no-repeat; */

            /* background-repeat: repeat-x; */

            background-repeat: repeat-y;

        }

四、背景定位 background-position

属性名：background-position
作用：主要用于设置不重复的图片在背景区域的加载开始位置
属性值：分为三种写法，单词表示法、像素表示法、百分比表示法。不论哪种写法
属性值都有两个，值之间用空格分隔
第一个属性值：表示背景图片在水平方向的位置
第二个属性值：表示背景图片在垂直方向的位置

①、单词表示法

属性值都是使用代表方向的单词进行书写
水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
单词表示图片与盒子背景区域进行对应方向的对齐

background-position: right bottom; /* 对应方向对齐 */

②、像素表示法

使用像素值作为背景定位的属性值
第一个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点水平方向位移的距离
第二个属性值：像素是几，表示背景图片左上角针对 border 以内的左上顶点垂直方向位移的距离

background-position: 50px 50px;

像素值区分正负，正负代表位移方向不同：

正数：表示图片针对盒子的原点向右、向下移动
负数：表示图片针对盒子的原点向左、向上移动

百分比表示法使用百分比数字作为属性值

100% 代表的数值：
水平方向，等价于盒子的 border 以内的背景区域宽度减去图片的宽度
垂直方向，等价于盒子的 border 以内的背景区域高度减去图片的高度

五、背景附着 background-attachment

属性名：background-attachment
作用：设置的是背景图片是否要随着页面或者盒子的滚动而滚动。属性值

六、综合写法 background

background 属性可以将五个单一属性的值进行合写
属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置

 body {

          background: url(images/bj.jpg) no-repeat center top scroll #666;

      }

注意事项：

①、如果属性值没有设置完全，其他没有设置的单一属性会按照默认值加载

background: pink;

②、如果想去层叠综合属性中的一部分，其他的属性保持不变，最好使用单一属性写法进行层叠

body {

          background: url(images/bj.jpg) no-repeat center top  #666;

          background-attachment: scroll;

      }

七、背景应用

①、替换插入图

h1 标签是权重最高的标签，一般会在内部书写最重要的内容，比如 logo 图片、最大的标题等
另外

内部的文字，可以帮助提高 SEO 搜索排名
在设置的是 logo 图片时，如果使用插入图，就不能书写搜索关键字

<h1>

    <a href=""><img src="data:images/lagouwang.jpg"> </a>

</h1>

背景图替换插入图方法

如果想解决 SEO 问题，可以将 HTML 结构中，插入图换成搜索关键字，然后使用 css 添加背景图给标签或标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    h1 {

        width: 200px;

        height: 100px;

    }

    h1 a {

        display: block;

        width: 200px;

        height: 100px;

        background: url(images/lagou_small.jpg) no-repeat;

    }

</style>

</head>

<body>

    <h1>

        <a href=""> 今天|太阳|真好|666 </a>

    </h1>

</body>

</html>

文字隐藏方法

1、将字号设置为 0。IE8 及以上或高版本浏览器可以隐藏文字，但是 IE7 及以下有兼容问题

font-size: 0;

2、可以设置给标签一个 text-indent 属性，属性值为负的很大的值，文字会走到盒子外部，直接再设置溢出隐藏属性，将溢出文字隐藏

h1 a {

        display: block;

        width: 200px;

        height: 100px;

        background: url(images/lagou_small.jpg) no-repeat;

        /* font-size: 0; */

        text-indent: -20em;

        overflow: hidden;

    }

②、padding 区域背景图

在一个盒子中有背景图部分，而且有文字内容，文字会让开背景图区域进行加载，背景区域应该使用 padding 挤出位置
四个方向的 padding 都可能用于添加背景图

.list {

        width: 300px;

        padding-left: 10px;

        border: 1px solid #000;

        margin: 10px;

        list-style: none;

        font: 16px/32px "楷体"

    }

    .list li {

        padding-left: 25px;

        background: url(images/tubiao.png) no-repeat left center ;

    }

③、精灵图技术

当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户
然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度
为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）

css 精灵

CSS 精灵是一种处理网页背景图像的方式
它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来
通常情况下，这个由很多小的背景图像合成的大图被称为精灵图

css 精灵的技术依据

将网页中需要用到的小尺寸背景图制作成一张背景透明的 png 图片
利用背景定位技术，将精灵图的每个小图片加载到对应的标签上

制作精灵图的注意事项

精灵图上放的都是小的装饰性质的背景图片，插入图片不能往上放
精灵图的宽度取决于最宽的那个背景图片的标签宽度
精灵图可以横向摆放也可以纵向摆放，但是每个图片之间必须留够足够的空白，保证背景图片加载到一个标签内部时，不能出现多余内容
在精灵图的最底端，尽量留一点空白，方便以后添加其他精灵图

可以通过网上的在线进行制作精灵图

八、CSS3 新增背景属性

①、背景半透明

CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式
rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在 0-1 之间，0 表示完全透明，1 表示完全不透明，0.5 表示半透明
书写方式：rgba(红色，绿色，蓝色，不透明度)
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        p{

            width: 100px;

            height: 100px;

        }

        .p1 {

            background-color: rgba(0, 255, 0, 1);

        }

        .p2 {

            background-color: rgba(0, 255, 0, 0.5);

        }

    </style>

</head>

<body>

    <p class="p1"> 原 </p>

    <p class="p2"> b半透明  </p>

</body>

</html>

同样，可以给文字和边框透明，都是 rgba 的格式来写

color: rgba(0,0,0,0.5);

border: 1px solid rgba(0,0,0,0.5);

②、背景缩放 background-size

通过 background-size 设置背景图片的尺寸，就像我们设置的尺寸一样，在移动 Web 开发中做屏幕适配应用非常广泛

.box1 {

    background-size: 50px 50px;

}

.box2 {

    background-size: 50% 50%;

}

.box3 {

    background-size: cover;

}

.box4 {

    background-size: contain;

}

<div class="box1"> px 值 </div>

<div class="box2"> 百分比 </div>

<div class="box3"> cover </div>

<div class="box4"> contain </div>

③、多背景

CSS3 中规定，一个盒子上，可以添加多个背景图片
background-image 的属性值书写时，以逗号分隔多背景的 URL路径地址
注意：背景加载时，先写的背景压盖后写的背景图片

 background-image: url(images/pdx.jpg) ,url(images/lagouwang.jpg);

CSS 常用样式 – 背景属性的更多相关文章

CSS基本样式-背景属性
代码是敲出来的,建议一个一个过一遍背景属性背景颜色 background-color 背景颜色默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...
css常用样式背景background如何使用
css背景background属性常用于定义HTML的背景,background简写属性作用是将背景属性设置在一个声明中,background背景属性常见为以下这些:.background-color ...
CSS常用样式属性
1.CSS字体和文本相关属性属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
CSS常用样式及示例
CSS常用样式及示例一.简介层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
CSS常用样式（四）之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
复习-css边框和背景属性
css边框和背景属性 border:所有边框属性 border-width:四条边框的宽度 border-style:设置边框样式,主要有dotted.solid.double border-colo ...
复习-css常用伪类别属性
css常用伪类别属性对<a>标签可制动态效果的css a:link:超链接的普通样式 a:visited:被点击过的超链接样式 a:hover:鼠标指针经过超链接上时的样式 a:acti ...
css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

随机推荐

how to convert SVG shapes to polygon
how to convert SVG shapes to polygon 如何将 svg 的 rect 转换成 polygon rect.circle.ellipse.line.polyline.po ...
vux使用
Vue中使用vux的配置,分为两种情况: 一.根据vux文档直接安装,无需手动配置 npm install vue-cli -g // 如果还没安装 vue init airyland/vux2 my ...
HTTP 协议中的并发限制及队首阻塞问题
本文转载自HTTP 协议中的并发限制及队首阻塞问题串行连接 HTTP/0.9 和早期的 HTTP/1.0 协议对 HTTP 请求处理是串行化的.假如一个页面包含 3 个样式文件,同属于一个协议.域名 ...
一次"内存泄漏"引发的血案
本文转载自一次"内存泄漏"引发的血案导语 2017年末,手Q春节红包项目期间,为保障活动期间服务正常稳定,我对性能不佳的Ark Server进行了改造和重写.重编发布一段时间后, ...
rar密码破解工具汇总
rar密码破解工具汇总前言假如酷爱在网络上找各种资源的你,经历千辛万苦终于找到了一个rar打包的文件,兴奋地慌忙点击,可打开才发现是加密的,相信这样的场景很多人都遇到过,今天就针对压缩文件密码的破 ...
创建一个scrapy爬虫框架的项目
第一步:打开pycharm,选择"terminal",如图所示: 第二步:在命令中端输入创建scrapy项目的命令:scrapy startproject demo (demo指的 ...
[个人总结]pip安装tensorboard太慢
在执行pip install语句的时候直接指定国内豆瓣的镜像源进行下载: pip install -i https://pypi.douban.com/simple 你想下载的包的名称例如下载ten ...
漫漫Java路1—基础知识—初涉java
前言主学信息安全,在编程的路上还是一个孩子,还在一步一步探索,有些东西可能是站在自己的位置思考的,很可能会出现一些啼笑皆非的错误,如果有误,还希望各位斧正. Java安装 jdk的安装甲骨文官网选 ...
C# 应用 - 封装类访问 Oracle 数据库
1. 引入库类 Oracle.ManagedDataAccess.dll using Oracle.ManagedDataAccess.Client; 2. 粗暴封装 namespace xx { p ...
[BJWC2018] Kakuro
一.题目点此看题二.解法我一开始一直想不出来,直接刚这个题实在是太复杂了,因为一开始就是不合法的. 下次遇到复杂的题一定要想调整法 ,我再不往这个方向想我吔屎好了言归正传,我们先找一组可行的 ...