详解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实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
Css3新特性应用之形状总结
Dec 08 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
Apr 07 HTML / CSS
CSS3实现360度循环旋转功能
Feb 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python实现简单的计时器功能函数
2015/03/14 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
科尔士百货公司官网:Kohl’s
2016/07/11 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
房地产还款计划书
2014/01/10 职场文书
企业内部培训方案
2014/02/04 职场文书
校园活动宣传方案
2014/03/28 职场文书
项目经理任命书
2014/06/04 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
Windows server 2012搭建FTP服务器
2022/04/29 Servers
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers