CSS入门之背景样式实例，背景图滚动:background-attachment,background复合样式

最新推荐文章于 2024-01-12 13:54:26 发布
最新推荐文章于 2024-01-12 13:54:26 发布
阅读量1.2k 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kissme_a/article/details/18850021
版权

背景图滚动分两种：

1.background-attachment:scroll 表示图片随着滚动条滚动

<html>
<head>
	<title>列表实例</title>
	<link rel="stylesheet" href="js.css" type="text/css"/>
</head>
<body>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
	i love you<br>
	i love you very much<br>
	do you love me<br>
	if you love me please tell me<br>
</body>
</html>


//js.css
body{
background-image:url("E:/1.jpg");
background-repeat:no-repeat;
background-attachment:scroll;
}


2.background-attachment:fixed 表示图片不随滚动条滚动

//js.css
body{
background-image:url("E:/1.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}

background的复合样式 

//js.css
body{
background:url("E:/1.jpg") no-repeat fixed;
}



最爱林丽明小姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background 组合写法_css中background复合属性详解
weixin_42303282的博客
01-31 4530
==========================================================单个属性的写法.sample1 {/*背景颜色*/background-image: url(sample.gif); /*背景图片*/background-repeat: no-repeat; /*平铺(?)*/background-attachment: fixed; /*随文本...
css 背景固定样式background-attachment属性基础
01-21
在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。 语法： background-attachment:scroll/fixed; 说明： background-attachment 属性只有2个属性值。scroll表示背景...
HTML-CSS（八）背景样式的使用
weixin_44730244的博客
04-19 151
对于背景样式样式的设置，首先有个小细节需要注意的 元素宽高百分比 元素宽高的百分比，是相对父元素而言的，若父元素高度为0，则子元素高度即使设置100%，大小也是0，html元素是相对于浏览器窗口而言的，默认情况下html高度为0，宽度100%，如果要是实现body沾满整个屏幕则需要同时设置html，body的高度为100% 上图这个有个清除滚动条的操作，其实，在本案例中就算没有margin:0滚动条没有出现，因为在本例中，高度始终只是浏览器窗口的高度。如果高度自行设置超过了窗口的高度，比如2000px那么
CSS background-attachment
broken_promise的博客
03-27 387
background-attachment 这个属性决定背景图像的位置是否固定在视口(viewpoint), 还是随着它的包含块滚动. 语法 关键词 scroll 默认值, 表示背景相对于元素自身的固定的, 不随着元素的内容滚动而滚动 概括理解视口就是浏览器的可见部分, 但不包括浏览器自身的书签栏, tab 栏和地址栏部分. <div style="height: 1000px; width: 100px;"></div> <div class="box"&gt
html中背景固定,css背景固定样式background-attachment属性介绍
weixin_42509197的博客
07-06 2961
原标题：css背景固定样式background-attachment属性介绍主要为大家介绍了在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动,需要的朋友可以参考下一、background-attachment属性在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。语法：back...
CSS——background复合写法
月来better
08-04 4930
背景复合写法： background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置 注意： background和background-size不能一起连用，否则不生效 案例如下： *{ margin: 0; padding: 0; } html,body,div{ width: 100%; height: 100%; } <div style="background: url('./assets/images/13.jpg') 100% 100%.
【css】background的复合写法
Eagler_Step
06-29 864
background-size 与 background的结合，避免与background-position混淆。 其中，background-position和background-size间需要用 字符′/′\color{red} {字符'/'}字符′/′ 连接。
CSS3滚动视差效果的制作技巧
natalie86的专栏
03-03 1231
“视差(parallax)”效果现在在互联网上越来越流行了。如果你还没听说过什么是视差效果，它其实就是利用图片形成不同的层，分别以不同的速度，不同的方向移动产生的效果。这会产生出很奇妙的视觉效果，能有力的吸引住浏览者的目光。 观看演示 在web设计中，最常见的实现视差效果的方式是使用jQuery插件。但这种方法有一些弊端。这些插件大多都是在window对象的scroll事件上放
css3实现一个div设置多张背景图片及background-image属性实例演示
09-27
主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
css background-attachment属性进阶
01-19
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。 local：背景图相对于元素内容固定， inhert:继承，没什么说的。 该属性可以应用于任何元素。 一、scroll【背景图滚动】 ...
CSS的background属性的缩写顺序介绍
12-13
background 属性是background-color，background-image，background-position，background-attachment，background-repeat，这五个属性的缩写，优点是比单个属性书写要简单，要少写很多代码。就是有时令人在书写这五个属性的顺序上有些困扰。下面一段代码取自搜狐： 复制代码代码如下: .bBot{background:url(../images20130624/bg.png) no-repeat -1424px -5px;overflow:hidden;height:1px;clear:both;font-si
CSS3教程：background-clip和background-origin
01-19
background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。 background-clip 用来判断 background 是否包含 border 区域。而 background-origin 用来决定 background-...
CSS3 background-attachment：属性
沐枫
07-18 735
background-attachment :定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 inherit: 继承初始值: scroll 继承性: 否 适用于: 所有元素 HTML代码： <!DOCTYPE html> <h...
css复合属性的写法
10-01 2739
==========================================================1. 背景－background==========================================================单个属性的写法.sample1 {background-color: #CCCCCC; /*背景颜色*/backgroun...
CSS2day.2(块内元素，行内元素，行内块元素，背景(background的复合写法))
shrimper
05-29 1165
文章目录CSS元素显示模式块元素行内元素行内块元素总结：显示模式的转换： CSS元素显示模式 作用：更好的布局我们的网页 HTML一般分为块元素和行内元素两种类型 比如div独占一行，一行可以放多个span。 块元素 常见块内元素有：h1~h6，p，div，ul，ol，li等。 特点： 独占一行 高，宽，外边距和内边距都可以控制 宽度默认是容器（父级宽度）的100% 可看做是一个容器（盒子），里面可以放行内或者块级元素 以下注意： 文字类的元素内不能使用块级元素 <p>
background复合属性样式及顺序
最新发布
wonderfulgood的博客
01-12 544
background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角。
background复合写法顺序
weixin_50367873的博客
02-28 3018
background: #000 url(../images/logo.png) no-repeat left center / cover; 参数说明 background-color 背景色 background-image 背景图 background-repeat 是否重复显示 background-position / background-size 背景图片位置 / 背景图片大小 注意：background-size是CSS3的属性 它要与background-position配合使用，中间有
关于background复合写法
roadloser的博客
04-02 4774
常用的复合样式写法 1. ~image ~repeat ~attachment ~position/~size 2. ~image ~repeat ~attachment ~position 3. ~image ~repeat ~position/~size 例子：直接上代码 <!DOCTYPE html> <html lang="en"> <head> &...
css设置背景图片随滚动缓慢滚动_css控制背景图像不随滚动条的滚动而滚动
weixin_39890814的博客
12-19 769
这几天在写一个demo,设置背景图像，background: url("../images/bg.jpg") repeat ;在使用$(window).scroll(function() {....});监听滚动条时，在google下正常运行，背景图像没有异常在ie、360、火狐下滚动滚动条时，背景图像一闪一闪的，很难受。百度：说需要调显示器的监视器的屏幕刷新频率 > 70 Hz 。可是我的...
在app.vue中设置了/* 修改滚动条样式 */ ::v-deep ::-webkit-scrollbar { width: 5px; /* 设置滚动条宽度 */ } ::v-deep ::-webkit-scrollbar-thumb { background-color: #ccc; /* 设置滚动条拖动块的颜色 */ } ::v-deep ::-webkit-scrollbar-track { background-color: #f1f1f1; /* 设置滚动条背景颜色 */ }，但是不生效
06-12
首先，需要确认你的浏览器是否为 Webkit 内核，因为 `::-webkit-... /* 设置滚动条背景颜色 */ } ``` 需要注意的是，`!important` 关键字会覆盖所有的样式优先级，包括行内样式和内联样式，所以应该谨慎使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值