详解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之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5 embed标签定义和用法详解
May 09 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
Mar 01 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 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中apc缓存使用示例
2013/12/25 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
ThinkPHP实现动态包含文件的方法
2014/11/29 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
iView框架问题整理小结
2018/10/16 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
安装Python的教程-Windows
2017/07/22 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
Python 实现数组相减示例
2019/12/27 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
婚庆公司的创业计划书
2014/01/22 职场文书
中文师范生自荐信
2014/01/30 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
导游词之徐州云龙湖
2019/11/19 职场文书
MySQL update set 和 and的区别
2021/05/08 MySQL
python 进阶学习之python装饰器小结
2021/09/04 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
vue自定义右键菜单之全局实现
2022/04/09 Vue.js