详解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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
Mar 05 HTML / CSS
html5 canvas 使用示例
Oct 22 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 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
将OICQ数据转成MYSQL数据
2006/10/09 PHP
mysql5写入和读出乱码解决
2006/11/25 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php技巧小结【推荐】
2017/01/19 PHP
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
2017/04/13 Javascript
jQury Ajax使用Token验证身份实例代码
2017/09/22 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python decimal模块使用方法详解
2020/06/08 Python
python属于解释语言吗
2020/06/11 Python
pytorch SENet实现案例
2020/06/24 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
Gap英国官网:Gap UK
2018/07/18 全球购物
投标单位介绍信
2014/01/09 职场文书
婚假请假条怎么写
2014/04/10 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
端午节活动总结报告
2015/02/11 职场文书
2015年社区重阳节活动总结
2015/07/30 职场文书
2015中秋祝酒词
2015/08/12 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
2016年记者节感言
2015/12/08 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
如何Tomcat中使用ipv6地址
2022/05/06 Servers
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python