css3教程5-背景

最新推荐文章于 2022-09-28 20:39:38 发布
最新推荐文章于 2022-09-28 20:39:38 发布
阅读量177 收藏
点赞数
分类专栏： Web前端开发 文章标签： css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/William_fang/article/details/118254585
版权

文章目录

一.热身阶段

css2知识点

background：背景，它是复合样式，拥有多个属性值。

background-image：背景图。

background-color：背景色。

background-position：背景图定位。

background-repeat：背景图重复。

二.新增的属性（css3知识点）

1.背景图起源

知识点

background-origin：背景图起源，它有3个属性。

border-box：背景图从外边框开始显示。

padding-box：背景图从内间距开始显示。

content-box：背景图从内部区域开始显示。

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图起源</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            border: 10px solid rgba(0, 0, 0, 0.2);
            margin: 100px auto;
            padding: 10px;
            background: url("./img/world.jpg") no-repeat;
            /* 背景图起源的设置 */
            background-origin: border-box;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图1：border-box

在这里插入图片描述

效果图2：padding-box

在这里插入图片描述

效果图3：content-box

在这里插入图片描述

2.背景图修剪

知识点

background-clip：背景图裁切，它的属性值有4个。

border-box：外边框区域以外的被裁切 。

padding-box：内间距区域以外被裁切。

content-box：内容区域之外被裁切 。

text：文本区域以外被裁切。

①文本裁切是有兼容问题的，需要在background-clip属性之前加上私有前缀。

②私有前缀

谷歌：webkit

火狐：moz

IE：ms

③有了私有前缀之后，还需要给文字颜色加上透明度，接下来，我们才能看到裁切效果。

代码演示：图像裁剪 content-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修剪</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            border: 10px solid rgba(0, 0, 0, 0.2);
            margin: 100px auto;
            padding: 10px;
            background: url("./img/world.jpg") no-repeat;
            /* 背景图裁剪 */
            background-clip:content-box;
        }
      
    </style>
</head>
<body>
    <div></div> 
</body>
</html>

效果图1：图像裁剪 content-box

在这里插入图片描述

效果图2：图像裁剪 padding-box

在这里插入图片描述

效果图3：图像裁剪 border-box

在这里插入图片描述

代码演示：文本裁剪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修剪</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            border: 10px solid rgba(0, 0, 0, 0.2);
            margin: 100px auto;
            padding: 10px;
            background: url("./img/world.jpg") no-repeat;
            /* 背景图裁剪 */
            -Webkit-background-clip:text;
            font-size: 50px;
            /* 给文字颜色设置透明度 */
            color:rgba(0, 0, 0, 0.2);
        }
      
    </style>
</head>
<body>
    <div>11111111111111111111</div> 
</body>
</html>

效果图：文本裁剪

在这里插入图片描述

3.背景图的尺寸大小

知识点

background-size:背景尺寸大小。

属性值写法：

①数字+像素（px）

②数字+百分比（%）

③cover

④contain

属性和属性值的写法：

background-size: 宽 高;

background-size：英文单词;

cover：覆盖。背景图的原图会被拉伸，导致一部分图像缺失。

contain：容纳。背景图的原图会原封不动地展示出来。

代码演示：cover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图的尺寸大小</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 100px auto;
            background: url(./img/world.jpg) no-repeat;
            /* 设置背景图尺寸大小 */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

效果图1：cover

在这里插入图片描述

效果图2：contain

在这里插入图片描述

篇章

上一篇：css3教程4-阴影

下一篇：css3教程6-图像精灵

梦幻之光_dream
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS3--背景：图片大小、位置区域和剪裁
weixin_44348052的博客
07-14 3294
img1所在图层位于img2的上方，会对img2造成遮盖效果，因此可以利用这个特点合理定位背景图片和其他属性从而创造出由多张图片组合而成的背景。 二、背景图片的位置区域 background-origin对于盒子模型，包含外边距、边框、内边距和内容几部分，这几部分内容是一层层嵌套的。该属性设置的就是背景图片将从哪里开始显示，参数值和其代表意义如下： 三、背景图片剪裁 background-clip参数值和origin一样有三种，background-origin是...
css3 动态背景
11-05 2696
利用多层背景的交替淡入淡出，实现一种背景在不停变换的效果
jquery和css3打造超梦幻的三维动画背景
weixin_33901926的博客
09-04 111
今天为大家带来的是一款由jquery和css3实现的超级梦幻的背景效果。绿色的小原点由远到近，由近到远一种飞跃效果。效果非常好看，我们一起看下效果图：   在线预览   源码下载   我们一起看下实现的代码。这是一款由jquey和css3实现的效果。这里引用的是jquery 11.0版本。注意需在ie9以上浏览器、google、或火狐等支持css3的浏览器中运行。 html代码： ...
CSS3 入门教程
最新发布
Ifeng_iPhone的博客
09-28 913
css就是样式表，用来给html添加样式的html本身是素颜的，css就是化妆师，让我们html好看点。
css基础教程
content899的博客
09-17 1031
css基础教程 文章目录css基础教程一、css简介二、css语法三、css的引入方式1、内部样式表（内联式）2、外部样式表（外联式）3、内联样式表（内嵌式）四、css选择器1、元素选择器2、类选择器3、id选择器4、群组选择器5、包含选择器6、伪类选择器7、通配符五、浮动六、定位（position）1、相对定位（relative）2、绝对定位（absolute）3、固定定位（fixed）七、元素属性1、块级元素2、行内元素行内元素转为块级元素-------->display : block;块级元素
CSS3教程(5):网页背景图片
01-19
上一篇文章：CSS3教程(4):网页边框和网页文字阴影 CSS3的背景图片大小可以写成 background-size:Apx Bpx;-Apx = x轴(图片宽度)-Bpx = y轴(图片高度) 了解了这些，我们开始体验这个特性吧：最好支持CSS3背景大小的...
HTML5与CSS3基础教程
06-09
本教程《HTML5与CSS3基础教程（第8版）中文高清版》将详细讲解这些概念，并通过实例演示如何将它们应用到实际项目中。无论你是初学者还是希望更新技能的开发者，都能从中受益匪浅，快速提升网页设计和开发能力。
HTML5+CSS3网站设计基础教程 源代码.7z
11-14
这个"HTML5+CSS3网站设计基础教程 源代码.7z"压缩包包含了学习这两项技术的全套源代码，对于初学者来说是一份极其宝贵的资源。 HTML5是超文本标记语言的第五个版本，它在HTML4的基础上做了大量改进和扩展，以适应...
曹鹏CSS视频教程-27.背景附着.rar
07-09
1. "cpcss27.swf" - 这很可能是一个Flash视频文件，是曹鹏CSS教程的一部分，专门讲解第27节——背景附着。SWF格式通常用于在线播放动画和教学视频，用户可以借此观看并学习如何设置和使用CSS背景附着属性。 2. "下载...
Web前端案例3-导航栏
William_fang的博客
04-14 5265
文章目录一.案例源码二.案例效果图三.知识点总结1.页面结构分析2.标签知识3.css知识 一.案例源码 navigation.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航栏</title> <link href="css/navigation.css" rel="stylesheet" type=
canvas教程1-canvas的基本使用
William_fang的博客
07-24 4747
文章目录一.canvas的简介二.源码三.效果图四.知识点总结篇章 一.canvas的简介 一直以来，web上的动画都是flash实现的，例如，广告、游戏等。 flash是有缺点的，例如我们需要安装Adobe flash player插件，并且漏洞多、重量比较大、卡顿、不流畅等。 因此，HTML5推出了新的画布标签—canvas。 canvas是一个轻量级的画布，我们使用canvas进行JavaScript编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅。 canvas彻底颠覆了flash
vsCode编译器的安装和使用
William_fang的博客
04-22 4740
文章目录一.vsCode的概述二.编译器的安装三.使用vsCode编译器1.创建html2.代码补全3.快捷操作4.在编译器里安装谷歌浏览器的插件5.运行谷歌浏览器四.emmet插件的使用 一.vsCode的概述 vsCode是一个轻量级且功能强大的编译器，它不光拥有很多的插件，而且还具有丰富的语言，例如JavaScript、PHP、Java、Python、C++、go、C#。 如果学习前端，vsCode就是必备的编译器，因为它不光有后台语言，还有前台语言。 例如，html、css。 想要了解更多，就可以看
vue-element项目实战之商品管理系统
William_fang的博客
04-20 2954
商品管理后台系统。（该项目由登录、会员等级、会员列表、商品详情、商品列表、用户中心等页面组成，有登录、注册、重置、增删改查等功能，详细功能前往gitee说明文档查看）
Web前端案例1-古诗
William_fang的博客
04-12 2665
文章目录1.案例源码2.案例效果图3.知识点总结 1.案例源码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>古诗</title> <link href="index.css" rel="stylesheet" type="text/css"> <!--引入css样式-->
Web前端基础1-盒子模型
William_fang的博客
03-27 1878
文章目录一.盒子模型1.Webstrom编译器2.盒子模型结构图3.盒子模型案例和解析 一.盒子模型 1.Webstrom编译器 编译器：WebStorm 2020.3 x64 2.盒子模型结构图 3.盒子模型案例和解析 box.html <!DOCTYPE html> <html lang="en"> <!--语言为英语，自动生成的en--> <head> <meta charset="UTF-8"> <!--网页格式--&gt
HTML5教程8-视频
William_fang的博客
06-23 1782
文章目录一.视频1.代码展示2.知识点二.自定义视频1.代码展示2.知识点篇章 一.视频 1.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
Web前端案例2-表格
William_fang的博客
04-12 1708
文章目录一.案例源码二.案例效果图三.知识点总结1 .引入css的三种方法:2.表格标签3.标签知识4.css制作斜线的知识 一.案例源码 table.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> <style> .name /*姓名*/ {
es6模块化
William_fang的博客
06-30 1515
node.js遵循了CommonJS的模块化规范。导入其他模块使用require()方法。模块对外共享成module.exports对象。大家都遵循同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用。 AMD、CMD适用于浏览器端。CommonJS适用于服务器端。大多数模块化规范给开发者增加了学习的难度和开发的成本。因此，es6模块规范诞生了。es6模块化规范中定义：每个js文件都是一个独立的模块。导入其他模块成员使用import关键字。向外共享模块成员使用export关键字。 在
HTML基础3
William_fang的博客
04-25 1483
文章目录一.列表标签1.概述2.无序列表3.有序列表4.定义列表二.布局标签1.概述2.div标签3.span标签三.表格标签四.表单1.表单元素简介2.form标签3.input标签文本框密码框单选按钮复选框按钮4.文本域5.下拉菜单五.其他知识1.注释2.字符实体 一.列表标签 1.概述 列表：相当于一个容器，可以存放每一列的网页内容。 在Web领域中有无序列表、有序列表、定义列表。 2.无序列表 作用：可以在网页中搭建没有顺序的列表。 在使用无序列表的时候，需要两个标签配合使用，分别为ul标签、li标
HTML5教程7-实战：调色板
William_fang的博客
06-17 1463
文章目录一.调色板实现思路二.代码展示三.总结 一.调色板实现思路 ①实现网页布局 ②给范围绑定事件 ③将范围条目前处于的value赋值给右侧的兄弟元素 ④修改顶部盒子的背景颜色 二.代码展示 三.总结 ①表单元素可以结合事件input   当表单元素的value属性值发生变化的时候，这个事件会触发。 ②JSON数据格式是以K-V形式存在的，可以同时存储多条数据。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值