css网页中设置背景图片的方法详解

在css代码中设置背景图片的方法,包括背景图片、背景重复、背景固定、背景定位等

用css设置网页中的背景图片,主要有如下几个属性:
 

1,背景颜色 {">说明:参数取值和颜色属性一样
注意:在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。
这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。
例子:给部分文字加背景颜色给部分文字加背景颜色
表格背影颜色:

 

代码示例:
style=" margin-left: 0px; padding: 0px; clear: both; line-height: 24px;">2.背景图片:background-image

 

语法:{background-image: url(URL)|none}
说明: URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。
例子:给部分文字加背景图片

代码示例:
.imgbgstyle { background-image: url(logo.gif)}

3.背景重复:background-repeat

语法:{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
作用:背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片

说明:参数取值范围:
 

·inherit 继承
·no-repeat 不重复平铺背景图片
·repeat
·repeat-x 使图片只在水平方向上平铺
·repeat-y 使图片只在垂直方向上平铺

注意:如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4.背景固定:background-attachment

语法:{background-attachment:fixed|scroll}
说明:参数取值范围
 

·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

注意:背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。

例子:使背景图案不随文字“滚动”的CSS
 

代码示例:
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }

5.背景定位:background-position

语法:{background-position:数值|top|bottom|left|right|center}
作用:背景定位用于控制背景图片在网页中显示的位置。
说明:参数取值范围
 

·带长度单位的数字参数
·top:相对前景对象顶对齐
·bottom:相对前景对象底对齐
·left:相对前景对象左对齐
·right:相对前景对象右对齐
·center:相对前景对象中心对齐
 

·比例关系

关键字解释:
top left = left top = 0% 0%

本文转载于:猿2048➵https://www.mk2048.com/blog/blog.php?id=bhkb0ab&title=css网页中设置背景图片的方法详解

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370529.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

node-sass安装不成功的问题

SASS_BINARY_SITEhttps://npm.taobao.org/mirrors/node-sass/ npm install node-sass 简单粗暴的执行上述的命令。转载于:https://www.cnblogs.com/czaiz/p/6918114.html

npm升级依赖包_Taro跨端开发之依赖管理

昨天跑的好好项目,今天跑不起来我们在开发周期比较长的前端项目的时候,必然会遇到依赖管理的问题. 我们在开发项目的时候,我们用了大量的三方库.这些三方的依赖库时不时的会更新自己的代码.第三方依赖库的代码更新会很容易造成代码运行的不稳定, 比如昨天还跑的好好的项目,另一…

QOTD:Java线程与Java堆空间

以下问题很常见,并且与OutOfMemoryError有关:在JVM线程创建过程和JVM线程容量期间无法创建新的本机线程问题。 这也是我向新技术候选人(高级职位)提出的典型面试问题。 我建议您在查看答案之前尝试提供自己的答复。 题&#xff1…

sql查询重复项

select * from [表A] where id in (select id from [表A] group by id having count(id) >1 )转载于:https://www.cnblogs.com/wuyujie/p/7885017.html

java util logging_简单日志记录,使用java.util.logging

jspservletJavaBean模式下,可以做个简单的日志记录,日志文件保存在服务器.(Tomcat)package controller;import java.io.File;import java.io.IOException;import java.util.logging.FileHandler;import java.util.logging.Level;import java.util.logging.Logger;import javax.…

超级高铁

超级高铁 作者:武培,高培焱 作品来源:实践 美国电动汽车公司特斯拉和美国科技公司ET3都公布了“真空管钢运输”计划,特斯拉将其命名为“超级高铁”,ET3因列车外观酷似胶囊因而称之为“吃胶囊”列车。根据ET3公司的介绍…

使用Spring @Autowired List的责任链

在Spring 3.1中,有一种方法可以自动填充类型化的List,这在您想在代码中稍微进行去耦和清理时非常方便。 为了向您展示它是如何工作的,我将实现一个简单的责任链,该责任链将为通过的用户打印一些问候。 让我们从我们拥有的&#…

设计模式 建造者模式 与 Spring Bean建造者 BeanDefinitionBuilder 源码与应用

建造者模式 定义: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示主要作用: 在用户不知道对象的建造过程和细节的情况下就可以直接创建复杂的对象如何使用: 用户只需要给出指定复杂对象的类型和内容, 建造者模式负责按顺序创建复杂对象…

java 布隆过滤器_什么是布隆过滤器(Bloom Filter)?

在日常工作中,有一个比较常见的需求,就是需要判断一个元素是否在集合中。例如以下场景:给定一个IP黑名单库,检查指定IP是否在黑名单中?在接收邮件的时候,判断一个邮箱地址是否为垃圾邮件?在文字…

STM32上使用JSON

一、STM32工程中添加JSON 最近在一网2串项目,串口和网口之间可能需要定义一下简单的通信协议,而通信协议上则需要去定义一下通信的数据格式,上次听剑锋说要用Json来定义,目前查了下资料具体如何去应用还不 会。因为最新的KEIL上支…

Flex 学习

Flex案例一&#xff1a; 1 <html>2 <head>3 <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> 4 <title>无标题</title>5 <style type"text/css">6 body,h1,h2,h3,h4,…

Cocos2d-X中实现自己定义菜单处理事件

当用户点击再松开后才会响应菜单事件&#xff0c;而在游戏中有些游戏须要玩家点击后就处理事件。如玩坦克大战的时候&#xff0c;玩家是点击一下就发射子弹。并是点击松手后发射子弹&#xff0c;在Cocos2d-X中没有这样的消息。以下就通过自己定义的方式实现当用户点击后就调用处…

java linkedhashset_java之LinkedHashSet

LinkedHashSet是Set集合的一个实现&#xff0c;具有set集合不重复的特点&#xff0c;同时具有可预测的迭代顺序&#xff0c;也就是我们插入的顺序。并且linkedHashSet是一个非线程安全的集合。如果有多个线程同时访问当前linkedhashset集合容器&#xff0c;并且有一个线程对当前…

使用Spring Integration轮询http端点

如果您想用Spring Integration编写一个流程来轮询HTTP端点并从http端点收集一些内容以进行进一步处理&#xff0c;那有点不直观。 Spring Integration提供了几种与HTTP端点集成的方式- Http出站适配器–将消息发送到http端点 Http出站网关–将消息发送到http端点并收集响应作…

python模块离线安装_离线安装db2的python模块ibm_db

1、为什么要离线安装 没网&#xff0c;在银行工作&#xff0c;服务器环境配置&#xff0c;完全离线&#xff08;本来五分钟搞定的事情&#xff0c;非要搞一天。我服&#xff01;&#xff01;&#xff09; 2、安装步骤 视情况而定。 3。一个下载db2的client包&#xff0c;官网下…

Jmeter 场景设计

今天的业务场景是&#xff1a; 1.管理员登录后台---登录成功后添加一个某类型的产品---产品添加成功后&#xff0c;再为该产品添加10个排期。 2.管理员登录后台--登录成功后添加多个不同类型产品---产品全部添加完成后&#xff0c;依次为所有产品添加10个排期。 这是两种不同的…

Android IPC机制(五)用Socket实现跨进程聊天程序

1.Socket简介 Socket也称作“套接字“&#xff0c;是在应用层和传输层之间的一个抽象层&#xff0c;它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信。它分为流式套接字和数据包套接字&#xff0c;分别对应网络传输控制层的TCP和UDP协议。TCP协…

ArcGIS 网络分析[4] 网络数据集深入浅出之连通性、网络数据集的属性及转弯要素...

前面介绍完了如何创建网络数据集、如何使用网络分析功能&#xff0c;当然还有的读者会迷惑于一些更深层次的问题&#xff0c;比如网络数据集的连通性问题等。 因为不可能面面俱到&#xff0c;我只能挑重点来阐述&#xff0c;我觉得网络数据集的连通性、属性和转弯是初学者中比较…

java获取byte 长度_java获取字节的长度.

我们经常要获取中文,数字,或者英文字符所占字节的长度,下面就列出各种编码格式下所占字节的长度:代码如下:package pack.java.midea.dao;import java.io.UnsupportedEncodingException;/*** 测试;* author zhouhaitao* 2012-5-17*/public class Test {/*** param args* throws …

Batoo JPA –比领先的JPA提供商快15倍

介绍 我早在2000年代就喜欢JPA 1.0。 我甚至在稳定版本发布之前就将其与EJB 3.0一起使用。 我非常喜欢它&#xff0c;因此我为JBoss 3.x实现贡献了一些零碎的部分。 那时我们公司规模还很小。 创建新功能和应用程序比性能更重要&#xff0c;因为我们有很多想法&#xff0c;我…