H5 37-背景缩写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>37-背景缩写</title><style>div{/*width: 500px;*//*height: 500px;*//*background-color: red;background-image: url(images/girl.jpg);background-repeat: no-repeat;background-position: left bottom;*//*background: red url(images/girl.jpg) no-repeat left bottom;*//*background: red;*//*background: url(images/girl.jpg);*/}body{background-image: url(images/girl.jpg);background-repeat: no-repeat;/*background-attachment: scroll;*/background-attachment:fixed;}</style>
</head>
<body>
<!--
1.背景属性缩写的格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;快捷键:
bg+ background: #fff url() 0 0 no-repeat;2.注意点：
background属性中， 任何一个属性都可以被省略3.什么是背景关联方式？
默认情况下背景图片会随着滚动条的滚动而滚动， 如果不想让背景图片随着滚动条的滚动而滚动， 那么我们就可以修改背景图片和滚动条的关联方式4.如何修改背景关联方式？
在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的格式
background-attachment：scroll;取值：
scroll 默认值， 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动快捷键:
ba background-attachment:;
--><div></div>
我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
<br>
我是文字
</body>
</html>

转载于:https://www.cnblogs.com/ljcgood66/p/6580042.html

H5 37-背景缩写相关推荐

CSS背景缩写、简写详细
CSS背景缩写.简写不太会这个,到网上搜了下,发现写的都不中意,就想到自己写一个出来背景共有8个属性: background-color 背景颜色 background-position ...
开发H5时背景照片兼容不同手机屏幕处理的最佳实践
最近在重新做过去常做的翻页H5,关于背景图有些新的经验心得分享. 翻页H5的背景图通常是要求全屏的.这里就存在一个问题,目前市面上的手机屏幕比例非常的不统一,这导致在背景图上的处理相当要注意. 通常我 ...
H5当中背景图像定位方法（position大图定位小图简单版本）
2022.11.11 文章目录一.position是什么? 二.使用步骤 1.导入图片 2.定位总结一.position是什么? position在h5当中指定位,例如background-po ...
H5页面设置背景图，微信可浏览背景图
最近做项目需要在微信播放视频,设置播放的背景图,折腾了好久 <div class="video-back" :style="{backgroundImage: 'u ...
H5+CSS3 背景图毛玻璃效果实现方案
方案一.<img> + filter: blur() <div class="container"><img class="backgrou ...
H5里面背景图片的设置
background-size属性和background-origin属性.background-clip属性一样,也是CSS3对于background新增加的属性.它的作用是指定背景图片的大小,比 ...
h5 实现背景左右滚动效果
方法一(用轮播插件来进行修改): 用轮播图来进行轮播,网上一大把的轮播插件,直接拿来调试一下即可,将每个图片进行轮播样式轮播即可,不作过多介绍. 优缺点:该方法运行工作量大,图片需要单独切割,多个轮播 ...
h5页面背景图在移动端不显示
a{ background: url('../img/bg.png') repeat-y ; background-size: 100%; width: 100vw} 在移动端页面过长不显示背景图修 ...
H5中背景图片自适应
写在html中body中,即可 <body background="images\bg.jpg" style=" background-repeat:no-repe ...

H5 37-背景缩写

H5 37-背景缩写相关推荐

最新文章

热门文章