详解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制作卡片式图片的方法
Jul 08 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5 canvas实现移动端上传头像拖拽裁剪效果
Mar 14 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
详解CSS中postion和opacity及cursor的特性
Aug 14 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 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 生成随机验证码图片代码
2010/02/08 PHP
php连接数据库代码应用分析
2011/05/29 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
JS backgroundImage控制
2009/05/19 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
体育教育专业自荐信范文
2013/12/20 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
教学大赛获奖感言
2014/01/15 职场文书
董事长秘书工作职责
2014/06/10 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
三严三实心得体会范文
2014/10/13 职场文书
五年级学生期末评语
2014/12/26 职场文书
邀请函范文
2015/02/02 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
主婚人致辞精选
2015/07/28 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Java实现简易的分词器功能
2021/06/15 Java/Android
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python