详解background属性的8个属性值(面试题)


Posted in HTML / CSS onNovember 02, 2020

CSS中background的属性值

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-attachment

复合属性:background:background-color background-image background -repeat background-position background-attachment
CSS3新增:不能用background的复合属性
background-size,background-origin,background-clip

详解background属性的8个属性值(面试题)

<!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.tiankong.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.tiankong.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属性值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
CSS filter 有什么神奇用途
May 25 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 #HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 #HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 #HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 #HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 #HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 #HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 #HTML / CSS
You might like
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JS实现点击事件统计的简单实例
2016/07/10 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
EL表达式截取字符串的函数说明
2017/09/22 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
2019/09/21 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Python  连接字符串(join %)
2008/09/06 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
运动会广播稿诗歌版
2014/09/12 职场文书
勇敢的心观后感
2015/06/09 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
zabbix监控mysql的实例方法
2021/06/02 MySQL
不同品牌、不同型号对讲机如何互相通联
2022/02/18 无线电
Golang获取List列表元素的四种方式
2022/04/20 Golang