css 背景图怎么设置自动填充满_CSS属性设置 -- 背景样式

08ec8c91bdfb56d2ec541a4593cd1679.png

Ⅰ background-color: -- 设置标签的背景颜色

  • rgba(0,0,0,0.65); -- (红,緑,蓝三原色,透明度)只能给背景设置透明度
  • opacity: 0.65; -- 改变整个标签的透明度
<style>

43238b47b33bba14f4c4389d61fc37e3.png

Ⅱ background-image: --设置标签的背景图片

  • url("图片网址"); -- 如果图片的大小没有标签大,那么会自动在水平和锤子方向平铺和填充
<style>

5ffd76d4982fcb5cacb7adabcb9a2d28.png

683ca1e98623fca262e024d398d09b7e.png

Ⅲ background-size: -- 设置宽、高

  • 300px 300px; -- 第一个参数为宽度,第二个为高度
  • 100% 100%; -- 设置跟随网页比例变化
  • npx; -- 只写一个默认是图片的宽度,高度会同比例自动改变

9e83350561a3da077a7113e9bc6b0f69.png

Ⅳ background-repeat: -- 平铺方式

  • no-repeat; -- #不重复,背景图片将仅显示一次
  • repeat-x; -- #背景图片将在水平方向平铺
  • repeat-y; -- #背景图片将在垂直方向平铺
  • 可以在服务端将一个大图片截成小图片,然后在客户端基于平铺属性将小图重复
  • 这样用户就以为是一张大图,如此,既节省了流量提升了速度,又不影响用户访问
  • 例如很多网站的导航条都是用这种手法制作的
<style>

0e663e67a8939729d552113fd2601b6e.png

Ⅴ background-attachment: -- 背景图片固定或滚动

  • scroll; -- #默认值,背景图片不会随着滚动条的滚动而滚动
  • fixed; -- #会随着滚动条的滚动而滚动
<style>

6615da0b00cd6960de9359f02b785664.png
默认不会自动给滚动

57bc8123f96de335aed19efd6505cc14.png
设置自动滚动

Ⅵ background-position: -- 控制背景图片的位置

  • background-position:水平方向的值,垂直方向的值;
  • 方位名词
    • 水平方向:left,center,right
    • 垂直方向:top,center,bottom
    • 如果只设置了一个关键词,那么第二个值就是"center"
  • 百分比
    • 第一个值是水平位置,第二个值是垂直位置
    • 左上角是 0% 0% , 右下角是 100% 100%
    • 如果只设置了一个值,另一个值就是50%
  • 具体像素(一定要加px单位)
    • 例如:30px,50px等等
    • 第一个值是水平位置,第二个值是垂直位置。
    • 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位
    • 如果只设置了一个值,另一个值就是50%。
    • 可以混合使用%和position值
  • inherit --设置从父元素继承background属性值
background

71b853df85bf0c6f5bbd55938bca7238.png

Ⅶ inherit -- 继承background

  • inherit -- 设置从父元素继承background属性值
    • 以上背景属性的值均可以设置为inherit,代表从父元素继承background属性

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

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

相关文章

php开发客服系统(持久连接+轮询+反向ajax)

欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解&#xff1a;php开发客服系统(持久连接轮询反向ajax) php开发客服系统(下载源码) 用户端(可直接给客户发送消息)客服端(点击用户名.即可给该用户回复消息) 讲两种实现方式&#xff1a;一&#xff1a;iframe 服务器推技术com…

c语言判断整数_C语言技能|(草稿,不断完善中...)

2020年春考C语言有2个题型&#xff1a;填空&#xff0b;程序程序填空涉及&#xff1a;一、头文件的引用1.必有#include (注意&#xff1a;在devC 5.10中#include "stdio.h"也是正确的)2.若程序中使用数学函数&#xff0c;应加上头文件#include 3.头文件结尾无分号二、…

python生成器迭代_python中的生成器和迭代器

前言&#xff1a; 我们来了解一下什么是python中生成器。了解一下python生成器是什么&#xff0c;以及生成器在python编程之中能起到什么样的作用。 定义&#xff1a; 生成器和迭代器 通过列表生成式&#xff0c;我们可以直接创建一个列表。但是&#xff0c;受到内存限制&#…

python 生成pdf_如何使用Python生成PDF?

在日常办公中&#xff0c;我们会经常使用PDF文件。生成PDF的方法有很多&#xff0c;其中Python就可以。你知道怎么使用Python也可以生成PDF吗&#xff1f;下面来和小编一起学习下吧。首先我们访问网址&#xff1a;https://wkhtmltopdf.org/downloads.html &#xff0c;根据自己…

java 代码重用需要注意的事项_程序员笔记|编写高性能的Java代码需要注意的4个问题...

一、并发无法创建新的本机线程......问题1&#xff1a;Java的中创建一个线程消耗多少内存&#xff1f;每个线程有独自的栈内存&#xff0c;共享堆内存问题2&#xff1a;一台机器可以创建多少线程&#xff1f;CPU&#xff0c;内存&#xff0c;操作系统&#xff0c;JVM&#xff0…

java vbs_VBS基础篇 - vbscript Dictionary对象

Dictionary是存储数据键和项目对的对象&#xff0c;其主要属性有Count、Item、Key&#xff0c;主要方法有Add、Exists、Items、Keys、Remove、RemoveAll。创建Dictionary对象定义并创建Dictionary对象&#xff0c;使用CreateObject创建并返回自动化对象的引用Dim DicSet Dic C…

java integer最大值_五分钟学会java中的基础类型封装类

在刚刚学习java的时候&#xff0c;老师不止一次的说过java是一种面向对象的语言&#xff0c;万物皆对象。对于java中的基础数据类型&#xff0c;由于为了符合java中面向对象的特点&#xff0c;同样也有其封装类。这篇文章对其有一个认识。一、基本认识其实在jdk1.5之前&#xf…

web.xml文件位于web项目的目录结构中的_看完这篇,别人的开源项目结构应该能看懂了...

我为什么要写这篇近来&#xff0c;和不少初学Spring或Spring Boot的小伙伴私信交流了关于项目目录结构划分和代码分层的问题。很多小伙伴表示网上下载下来的开源项目看不懂&#xff0c;项目结构和代码分层看得很蒙&#xff0c;不知道应该以一个什么样的思路去学习和吸收别人的项…

mysql workbench中文设置_使用Workbench完成流体压力渗透分析

“之前的案例&#xff0c;APDL Showcase3里使用到了流体压力渗透载荷。有朋友读到以后&#xff0c;希望能在Workbench里实现这一功能。有需求就有动力&#xff0c;我们来试一试。 ”01—结果展示先看计算结果&#xff1a;(为了截图方便将模型旋转了90度)该案例为轴对称模型&…

ddns客户端_DDNS哪家最方便?试试看Mikrotik的ROS!

没有固定IP的情况下&#xff0c;想要提供外网访问&#xff0c;那么DDNS是必不可少的一个设置。DDNS&#xff08;Dynamic Domain Name Server&#xff0c;动态域名服务&#xff09;是将用户的动态IP地址映射到一个固定的域名解析服务。需要注意的是&#xff0c;不是域名是动态的…

python中级程序员是什么水准_程序员进阶:一篇搞懂Python中级应用

异常处理&#xff1a;try-except 异常即是一个事件&#xff0c;该事件会在程序执行过程中发生&#xff0c;影响了程序的正常执行。一般情况下&#xff0c;在Python无法正常处理程序时就会发生一个异常。 异常是Python对象&#xff0c;表示一个错误。当Python脚本发生异常时我们…

python做excel表格代码_[宜配屋]听图阁

安装两个库&#xff1a;pip install xlrd、pip install xlwt1.python读excel——xlrd2.python写excel——xlwt1.读excel数据&#xff0c;包括日期等数据#codingutf-8import xlrdimport datetimefrom datetime import datedef read_excel():#打开文件wb xlrd.open_workbook(rte…

python分布式框架_高性能分布式执行框架——Ray

Ray是UC Berkeley RISELab新推出的高性能分布式执行框架&#xff0c;它使用了和传统分布式计算系统不一样的架构和对分布式计算的抽象方式&#xff0c;具有比Spark更优异的计算性能。 Ray目前还处于实验室阶段&#xff0c;最新版本为0.2.2版本。虽然Ray自称是面向AI应用的分布式…

原 hibernate与mysql字段类型对应关系

原 hibernate与mysql字段类型对应关系 发表于8个月前(2015-04-17 08:56) 阅读&#xff08;1102&#xff09; | 评论&#xff08;0&#xff09; 2人收藏此文章, 我要收藏赞01月16日厦门 OSC 源创会火热报名中&#xff0c;奖品多多哦 摘要 hibernate与mysql字段类型对应关系 …

下拉选择框 其他_列表框 vs 下拉列表,哪个更好?

许多UI控件允许用户选择选项&#xff0c;它们包括复选框、单选按钮、切换开关、步进器、列表框和下拉列表。 在本文中&#xff0c;作者对列表框和下拉列表进行了定义&#xff0c;讨论何时使用各个元素&#xff0c;以及各个情况下使用哪一种更加合适。摘要列表框和下拉列表是紧凑…

springboot整合elasticsearch_Spring Boot学习10_整合Elasticsearch

一、Elasticsearch概念•以 员工文档 的形式存储为例&#xff1a;一个文档代表一个员工数据。存储数据到 ElasticSearch 的行为叫做 索引 &#xff0c;但在索引一个文档之前&#xff0c;需要确定将文档存储在哪里。•一个 ElasticSearch 集群可以 包含多个 索引 &#xff0c;相…

php制作图片轮播_图片轮播效果实现方法

图片轮播效果如何实现呢本文主要介绍了JQuery实现图片轮播效果的制作原理以及实现代码&#xff0c;文章末尾附上源码下载&#xff0c;具有很好的参考价值。下面跟着小编一起来看下吧&#xff0c;希望能帮助到大家。用JQuery操作DOM确实很方便&#xff0c;并且JQuery提供了非常人…

python有趣的面试题_一道3行代码的Python面试题,我懵逼了...|python基础教程|python入门|python教程...

https://www.xin3721.com/eschool/pythonxin3721/ 前言 本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。 今天来说说交流群里一位群友问的Python题目。刚开始由于没有电脑&#xff0c;我也没有运行出来&…

个人应用开发详记. (三)

好久没来更新了... IM即时通讯已进入最后阶段. 各个功能模块 框架基本写好. 剩下的就是细节上的优化了 由于内容上并没有什么大幅度的变动 . 就不上图了 . 元旦回家 放假3天~ 争取年前搞定此APP 转载于:https://www.cnblogs.com/ImyFen/p/5089968.html

r语言清除变量_如何优雅地计算多变量 | R语言进阶

社会科学研究经常会遇到“超多变量”的情况——多量表、多维度、多题项&#xff0c;以及复杂的正反计分题……如何更高效地计算量表总分&#xff1f;如何更简洁地进行反向计分&#xff1f;传统的统计工具&#xff08;Excel、SPSS等&#xff09;虽然也能解决这些问题&#xff0c…