关于background背景和img图片

2024-03-31 15:05:14

我的CSS苦逼学习日记（2）

img的相关内容：

因为img是行内替换元素，可以直接设置高度和宽度等。但是不会独占一行

若直接使用img不给任何修饰，则是显示图片的原本大小

 img {width: 60px;height: 50px;}

上图所示则是设计img的宽和高分别为60px和50px

img {width: 100%;height: 50%;}

上图所示则是设计img的长和宽分别占父级盒子宽和高的100%和50%

background的相关内容

background有：

1.background-color
2.background-images
3.background-style
4.background-position
等内容

background-color：
用来设置背景颜色

background-images：
用来设置背景图片，使用方法：
url()，url括号中的内容填写背景图片的相对路径
使用背景图片的好处：不占有位置，可以文字在图片之上显示，更加有美感。

background-style：
默认的状态是repeat，大致意思是若一个盒子为300×300px大小，而图片只有100×100px的图片，则会在盒子全方位内重复显示这个盒子，
repeat-y是只在y方向上重复显示，
repeat-x是只在x方向上重复显示，
no-repeat是图片不重复显示

background-position：
可以用来设置使用图片的哪个一个部分，这也是精灵图的使用原理，将许多小图标放在一个大图片上面，通过移动x，y坐标而显示大图片的指定区域，x，y可以为负值，y向下为正，x向右为正

设置背景颜色为透明色：
使用

div {width: 300px;height: 300px;background-color: rgba(0,0,0,.3);}

这种形式，其中 .3为0.3的缩写，它的值可以为0~1，数值越大，则透明度越低，1为不透明，0为完全透明。

关于background背景和img图片相关推荐

android背景图拉伸,解决android:background背景图片被拉伸问题
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
table vue 背景图片_table中background背景图片自动拉伸
解决android:background背景图片被拉伸问题 ImageView中XML属性src和background的区别: background会根据ImageView组件给定的长宽进行拉伸,而s ...
html背景图片带边框,css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
前端：background背景图
background背景图属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几 ...
免费壁纸背景高清图片素材网站
看到大家都在问壁纸背景高清图片素材,既要免费又要质量好,数量还要多,小编好不容易挖到了宝藏素材网站哦,不知道爱给网这个网站大家认识不,资源优质数量庞大,使用体验也很好,要是需要的话,赶紧看一看,小编会 ...
CSS 背景(background)+背景透明(CSS3)
CSS 背景(background) CSS 可以添加背景颜色和背景图片,以及来进行图片设置. background-color 背景颜色 background-image 背景图片地址 backgr ...
background 背景图
我们在开发的过程中,经常会用到各种各样的图片,长图.宽图.圆图.方图等等. 那么我们如何去设定图片的宽高,保证让图片等比例.自适应呢! 这里我们可以借助background,以背景图的形式去展示,那么 ...
【前端小点】CSS之background背景属性详解
本篇文章我们将一起展开来看css的background背景属性. 一.结构创建DIV <div class="div1">1 </div> 样式 widt ...
background 背景属性详解
background 背景属性我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

最新文章

热门文章