html怎么给背景图固定位置,css实现固定背景图像的方法
css实现固定背景图像的方法
发布时间:2020-08-29 11:26:59
来源:亿速云
阅读:81
作者:小新
小编给大家分享一下css实现固定背景图像的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
所谓固定背景图像,就是当我们在页面输入任何内容时或者移动鼠标,背景图像都不会发生变动。css实现背景图像固定也是非常简单的,我们可以使用css中的background的相关属性来实现。
那么我们在前面的文章中有给大家介绍过CSS如何实现背景图像重复效果。
下面我们就继续给大家介绍css背景图像固定的实现方法。
代码如下:
body {
background-image: url("/test/img/154e.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
这里是一行文字:圣诞节快乐!
这里是一行文字:圣诞节快乐!
这里是一行文字:圣诞节快乐!
这里是一行文字:圣诞节快乐!
这里是一行文字:圣诞节快乐!
这里是一行文字:圣诞节快乐!
效果如下图:
background相关属性:
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。其值为fixed表示当页面的其余部分滚动时,背景图像不会移动。
background-repeat 属性设置是否及如何重复背景图像。
以上是css实现固定背景图像的方法的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
html怎么给背景图固定位置,css实现固定背景图像的方法相关推荐
- 如何给HTML文件加一张背景图,如何在css中添加背景图?
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css background属性就是专门设 ...
- html背景图不同位置显示,div层背景图片显示位置详解
代码详解: div { background-image:url(/images/bg.jpg); 设置div层的背景图片 background-repeat:no-repeat; 背景图片不重复显示 ...
- 直播间背景图怎么设计?直播间背景设计软件分享。
直播间背景图怎么设计?直播间背景是指直播时所展示的背景墙或屏幕,通常用于营造氛围和增强视觉效果.在直播中,背景可以承载主播个人风格.节目内容.品牌形象等信息,同时也是吸引观众注意力和提高观看体验的重要 ...
- 背景图宽度自适应及背景图合并的CSS思想
关于宽度自适应,已经是前段开发人员必备的css技能之一,而背景图的合并则属于更高级别的要求. 我们为什么要宽度自适应,原因大体有以下几点: 第一:很多情况下有这样的需求,比如做B/S前端,90%以上要 ...
- php怎么加css和背景图,如何使用css中:after伪元素实现背景图片的叠加层?
在网页设计中我们发现越来越多的文本会放在图像之上,通常情况下,这不太好操作,因为图像具有动态颜色和光照,文本大部分是一种颜色.这通常对于可读性和可访问性的不太有利的,可能会让文本看起来不太清楚. 这意 ...
- php背景图片 存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
- html 背景图自适应实例(css 利用position:absolute)
之前因为这个背景放大缩小问题困扰几天,随后找了很多方资料才解决... 这次把他记录下来,事出仓促就直接放自己的代码了,效果图如下. 代码: <%@ page language="jav ...
- 完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
- background 互联网图片_完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...
最新文章
- mfc连接ubuntu mysql数据库_Ubuntu 16.04 Linux系统下使用C++连接mysql数据库
- “数据中心运维管理VIP学习群”问题汇总(一)
- http post请求 参数放在路径后面 java_「思唯网络学院」网络基本概念之HTTP协议...
- 前端学习(1961)vue之电商管理系统电商系统之调用api获取数据
- 【Python】解决urllib返回http error 503问题
- JAVA输出菱形并使用绝对值,案例用绝对值的方法打印出菱形
- html5 规定输入字段,HTML5 Input属性详解
- java声明时间为什么类型_JAVA--类的声明周期
- 记一些关于acm的小知识(自用,粗糙,勿点呀)
- 机器学习NLP领域入门
- Web常见前端面试题及答案
- python生成3d人体模型_无限想象空间,用Python就能玩的3D人体姿态估计
- spring boot企业合同管理系统 毕业设计源码161456
- FFmpeg常用指令记录sdp中提取sps/pps信息sps/pps(STAP-A解析)
- 视频教程-Excel项目实战从入门到精通(兼容2007、2010、2013、2016)-Office/WPS
- Dell 电脑重装系统步骤(一)
- C. Balanced Stone Heaps和P2440 木材加工
- 【程序源代码】投票小程序
- IOS菜鸟初学第八篇:接入京东联盟sdk,可打开任意京东的链接
- python 偏态分布调整_如何处理偏态数据