CSS关于图片填充指定元素或者用图片做背景

在实际开发中，经常会遇到需要将某图片填充到指定的div中或者将图片作为某个div的背景图片，然后还需要在图片的不同层面嵌入不同的操作。一般，要达成对应的效果的操作方式多样，但想要在不同浏览器上或者不同移动端达到兼容，既完成了图片的填充又能是图片完成各种div的自适应，推荐使用css样式里，“background:url (图片地址) center no-repeat;”——“固定图片位置”；“background-size:100% 100%; ”-“设置自适应大小”。其中，background-size还可以选择background-size: cover，具体可以根据实际需求来。

<div style="background: url('imgs/index.jpg') center no-repeat;background-size: 100% 100%;width: 100%;height: 325%;overflow: hidden;position: relative;"><div style="width: 100%;height: 8%; margin-top: 8%;" onclick="showRule(this)"></div><div style="width: 100%;height: 13%; margin-top: 10%;" onclick="showInput(this)"></div><div style="width: 100%;height: 13%; margin-top: 18%;"></div><div style="width: 100%;height: 12%; margin-top: 10%;"></div><div style="width: 100%;height: 12%; margin-top: 11%;"></div><div style="width: 100%;height: 11%; margin-top: 18%;"></div><div class="zhezhao" onclick="hiddenAll()"><div class="ruleDiv" onclick="clickRule()"></div><div class="inputDiv" onclick="clickInput()"></div></div></div><style>.ruleDiv {width: 82%;height: 60%;position: absolute;top: 8rem;left: 2rem;background: url('imgs/rule.png') center no-repeat;background-size: 100% 100%;display: none;z-index: 98;}.inputDiv{width: 91%;height: 24rem;position: absolute;top: 8rem;left: 1rem;background: url('imgs/input.png') center no-repeat;background-size: 100% 100%;display: none;z-index: 99;overflow: hidden;}
</style>

再补充一个样式：

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

如果不额外设置该样式的话，就是默认该样式的值为：background-attachment:scroll；

CSS关于图片填充指定元素或者用图片做背景相关推荐

OxyPlot 导出图片及 WPF 元素导出为图片的方法
OxyPlot 导出图片及 WPF 元素导出为图片的方法目录 OxyPlot 导出图片及 WPF 元素导出为图片的方法一.OxyPlot 自带导出方法二.导出 WPF 界面元素的方法三.通过附 ...
css 背景渐变填充指定宽度
给一个 div 设置背景渐变填充指定宽度,类似于进度条的样式.代码如下: <!DOCTYPE html> <html> <head> <meta charse ...
php修改图片为指定大小,php裁剪图片为固定大小步骤详解
这次给大家带来php裁剪图片为固定大小步骤详解,php裁剪图片为固定大小的注意事项有哪些,下面就是实战案例,一起来看一下. 做一个首页调用图像,有时需要获得固定大小的图像,因为首页的图像位置通常由设计 ...
php 图片填充颜色代码,PHP获取图片颜色值，检测图片主要颜色的代码：
$i=imagecreatefromjpeg("photo3.jpg");//测试图片,自己定义一个,注意路径 for ($x=0;$x for ($y=0;$y $rgb = i ...
CSS的背景（背景颜色，背景图片，背景平铺，背景图片位置，背景图片固定（图片附着），背景复合写法）
CSS的背景通过 CSS 背景属性,可以给页面元素添加背景样式. 背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等. 背景颜色 background-color 定义元素的 ...
pdf插入图片到指定坐标位置亲测可用
pdf插入图片到指定位置,常见图片格式都支持坐标位置可自定义根据文字.关键字识别坐标位置,可见另一个帖子:pdf识别关键字坐标依赖引用:itextpdf-5.5.13.jar 常见itextpd ...
图片压缩指定大小，让您的图片高效而优美
在现代社会中,图片是我们不可或缺的一部分,在各行业中都有着非常重要的作用.但是,大尺寸的图片不仅会占用过多的存储空间,还会导致网页或应用程序的加载速度变慢.因此,将图片压缩到指定大小是一个必要的步骤. ...
html背景图片内填充,CSS基础——使用图片填充元素背景
在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观.使用图片填充元素背景的常用样式标签有background-image.background-repeat.background- ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...

CSS关于图片填充指定元素或者用图片做背景

CSS关于图片填充指定元素或者用图片做背景相关推荐

最新文章

热门文章