前端HTML关于背景图片的使用

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.one{width: 300px;height: 300px;border: 20px dashed gold;padding: 30px;margin: 0 auto;/*2.设置背景图片url地址链接*/background-image: url(img/1.png);/*2.设置图片屏平铺效果图片小于标签尺寸 就会自动平铺充满整个标签repeat-x 仅x轴方向平铺repeat-y 仅y轴方向平铺no-reoeat 不平铺*/background-repeat: no-repeat;/*3.设置背景图片的位置默认left top可以设设置方位词 center right bottom left等可以直接设置px像素值 以及百分比%值*/background-position: center;/*4.background-size 背景图片尺寸a.px数值b.百分比 参考当前标签宽度c.cover 按照比例缩放图片 .cover会让图片充满整个容器有可能造成图片无法显示完整d.contain 按照比例缩放图片. contain按照比例缩放图片只要宽或者高一个方向铺满容器 就立刻停止缩放 有可能造成内容留白*/background-size: contain ;/*5.background-origin完整的第一张图片的开始位置a.border-box 从边框位置开始b.padding-box 从padding位置开始c.content-box 从内容位置开始*/background-origin: border-box;/*6.裁剪 background-clip： 开始裁剪的位置a.border-box 从边框位置之外的部分裁剪b.padding-box 把padding之外的部分裁剪c.content-box 把宽高之外的部分裁剪掉*/background-clip: content-box;/*以上综合写法*//*background: url(img/1.png) no-repeat center content-box;*//*注意 尺寸最好单独设置*//*background-size: conver;*/}.two{background: url(img/1.png) no-repeat center content-box;/*注意 尺寸最好单独设置*/background-size: contain;}</style></head><body><div class="one"><h1>hi，girl！</h1></div><div class="two"><h1>hi，girl！</h1></div></body>
</html>

运行结果：

前端HTML关于背景图片的使用相关推荐

Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...
使用umiJs搭建前端项目添加背景图片
1.找到路径修改全局样式的文件名为 global.less,我们可以在浏览器界面使用 F12 打开检查元素窗口,找到对应布局的标签.由于 React 构建的是单页面应用,直接找 <div id ...
（七）前端基础之背景图片，图片超链接存在的问题
一,background background-color和background-image可同时设置,背景颜色会作为背景图片的底色,背景图片默认在元素的左上角显示 background-positi ...
如何为Github Pages设置动态的背景图片？
准备做什么? 使用必应词典时,一次无意的点击,跳到了必应搜索引擎界面,突然眼前一亮,我看到一张图片,没错,高清大图!还可以往前翻几页,有的图片非常震撼:更有意思的是,在必应搜索首页,每张图片的背后都会 ...
前端性能优化：使用媒体查询加载指定大小的背景图片
日期:2013-7-8 来源:GBin1.com 直到CSS @supports被广泛支持,CSS媒体查询的使用接近于CSS中写逻辑控制.我们经常用CSS媒体查询来根据设备调整CSS属性(通常根据屏 ...
web里如何在背景图片上放置div元素_2020年web前端开发经典面试题总结整理（建议收藏）...
1,阐述清楚浮动的几种方式(常见问题) (1)父级div定义 height 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单.代码少.容易掌握缺点:只适 ...
前端背景图放置_web前端入门到实战：css 中的背景图片小技巧和存在的坑
body 的背景图设置第一种 :这种情况下背景图片可以缩放但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
前端背景图放置_CSS 背景图片排版
使用 CSS 套用背景图片到元素中可能是您前端设计过程中最常用到的功能. background 有非常丰富的属性,让我们可以针对不同的需求做设定. 同时一个元素可以具有多张背景图片.如果您想要套用多张 ...
5.前端CSS之基本属性(长宽,字体,文体,背景图片,阴影,border画圆,display)
1.块儿标签长宽height,width块儿标签可以设置长宽,设置长宽后依然独占一行 h1-h6,p,div行内标签无法设置长宽写了也不会生效 i,u,s,b span2.字体样式:font-fa ...

前端HTML关于背景图片的使用

前端HTML关于背景图片的使用相关推荐

最新文章

热门文章