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,一经查实,立即删除!

相关文章

EJB通过ANT提高EJB应用程序的开发效率、无状态发展本地接口bean、开发状态bean...

该jboss集成到eclipse 关掉Jboss控制台新闻Ctrlc&#xff0c;在MyEclipse→Servers→Jboss可配置JBoss。通过ANT提高EJB应用的开发效率 在HelloWorld 增加ANT&#xff0c;右击项目新建xml&#xff1a;build.xml&#xff0c;右击打开方式选择Ant .. 相应用进行编译、打包、公布、…

mysql-8.0.12语法_mysql-8.0.12 (免安装版) 安装详解

mysql-8.0.12 (解压版) 安装详解 错误解决第一步&#xff1a;mysql-8.0.12 (解压版)下载地址&#xff1a;https://www.mysql.com/downloads/第二步&#xff1a;配置初始化my.ini在mysql的bin目录中创建my.ini&#xff0c;将以下内容复制其中[mysqld]#设置3306端口port3306#设置…

python扩展库不是用于科学计算的有_有哪些科学计算的开源库

2017-03-19 回答 比较火爆的android开源库有以下&#xff1a; 1、volley 主要有以下模块&#xff1a; (1) json&#xff0c;图像等的异步下载&#xff1b; (2) 网络请求的排序&#xff08;scheduling&#xff09; (3) 网络请求的优先级处理 (4) 缓存 (5) 多级别取消请求 (6) 和…

mysql中间件面试题_面试题集锦-中间件 - 春哥大魔王的博客的个人空间 - OSCHINA - 中文开源技术交流社区...

Mysql引擎区别&#xff0c;聚簇索引是数据&#xff0c;非聚簇索引是引用&#xff0c;普通索引和主键索引两棵树&#xff0c;普通索引到主键索引有个回表&#xff0c;建立覆盖索引减少回表&#xff0c;利用前缀索引&#xff0c;注意索引顺序&#xff0c;隔离级别默认rr&#xff…

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.头文件结尾无分号二、…

mysql重连服务器失败_java – MySQL连接器错误“服务器时区值中...

参见英文答案 > The server time zone value ‘AEST’ is unrecognized or represents more than one time zone????????????????????????????????????9个我的问题MySQL连接器“服务器时区值中欧时间”无法识别或代表多个时区.该项目小…

git reflog and checkout

用错checkout 了比如想checkout出下面的一个版本&#xff0c;结果用错了 git checkout 8bfd9b1d292 这样会导致HEAD deatched &#xff0c;在这个地方修改后commit commit 8bfd9b1d2922b55586f41d37f1a2a992d580e1dd Author: lab <labdera.com.cn> Date: Tue Dec 8…

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;根据自己…

《avascript 高级程序设计(第三版)》 ---第三章 基本概念

本章主要介绍Javasript语言的一些语法&#xff1a; 1.严格模式&#xff1a;开启&#xff1a;"use strict"; 2.变量&#xff1a;全部用var来定义&#xff0c;在函数中使用的称为局部变量&#xff0c;不能全局使用。 3.数据类型&#xff1a;undefined,null,boolean,num…

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…

hadoop 单节点安装

http://hadoop.apache.org/docs/r2.6.0/hadoop-project-dist/hadoop-common/SingleCluster.html ,一&#xff0c;.安装hdfs1&#xff0c;hadoop-env.sh修改java_home2&#xff0c;core-site加入1,注意使用主机名映射2,端口使用&#xff1a;80203&#xff0c;缓存目录&#xff0…

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

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

06-CABasicAnimation基础核心动画

06-CABasicAnimation基础核心动画 核心动画只作用在层上面. 动画的本质是改图层的某一个属性. CABasicAnimation *anim [CABasicAnimation animation]; 图层有哪些属性,这里才能写哪些属性. anim.keyPath "transform.scale"; anim.toValue 0.5; 告诉动画完成的时候…

java 异常 理解_java异常理解(1)

JAVA异常处理机制1引子try…catch…finally恐怕是大家再熟悉不过的语句了&#xff0c;而且感觉用起来也是很简单&#xff0c;逻辑上似乎也是很容易理解。不过&#xff0c;我亲自体验的“教训”告诉我&#xff0c;这个东西可不是想象中的那么简单、听话。不信&#xff1f;那你看…

python turtle 绘图速度用函数会快吗_有趣的Python turtle绘图

专 题 Feature Story 16 \ China Science & Technology Education 文 _ 毛京宇&#xff0f;北京师范大学第三附属中学 魏云靖&#xff0f;北京市师达中学 有趣的 Python turtle 绘图  Python turtle 的发展 Python 中的 turtle 模块受启发于在欧美有 着广泛基础且历史悠久…

网络导通概率的研究

最近老师给了一个题目&#xff0c;说是研究一个正常矩阵任意概率置点概率下&#xff0c;双向导通&#xff08;x,y&#xff09;的概率&#xff08;要求有自然边界条件&#xff0c;也就是可以从0->length-1&#xff09;&#xff0c;用代码敲了一下demo&#xff0c;结果发现有个…