美文网首页
CSS中的背景和图片的区别

CSS中的背景和图片的区别

作者: 疯狂的蜗牛Dianna | 来源:发表于2018-08-18 17:50 被阅读0次

1.background-color:颜色;

背景颜色

2.background-imge:url(路径);

盒子有多大就能看到多大的背景图片,如果盒子比较大,那么会自动平铺

3.background-repeat:;背景平铺

当值 为repeat的时候背景为平铺
当值为no-repeat的时候背景为不平铺
repeat-x沿x轴平铺
repeat-y沿y轴平铺

4.background-attachment:;

背景是否跟随滚动
scroll滚动
fixed固定

5.background-position:;

取值:1、方位名词
left right top bottom center这些取值
方位名词书写顺序不论
right top右上角
left top左上角
right bottom右下角
left bottom左下角
2、像素
background-position: 100px 200px;
以盒子的左上角为原点,构建一个坐标系,水平向右,垂直向下
第一个值代表水平位置,第二个值代表垂直位置
3、百分比
以父元素的高度和宽度为占几成
4、混写
background-position:100px center;
水平x轴是100px;
垂直y轴是跟盒子居中;
或者:
background-position:center 100px;
水平x轴是居中的;
垂直y轴是100px;

5、背景的简写形式

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
快捷生成方式:bg+tab键
background:#fff url() 0 0 no-repeat;

6、img和背景图片的区别

第一点不同
1、img不需要设置宽高,可以直接显示出来
2、背景图片必须设置宽高才能显示,背景撑不开容器
第二点不同
1、img是不可以在图片上写字的,字会在盒子的外部(显示不了内容,除非用定位)
2、背景是可以在图片上写文字的,字在图片的里面
在实际中作中
img一般用来做产品图片展示(经常更新)
背景图片一般来做背景 或者一些很少更新的小icon

相关文章

  • CSS背景

    CSS背景(background) 目标 理解背景的语法和作用CSS背景图片和插入图片的区别 应用通过CSS背景属...

  • CSS中的背景和图片的区别

    1.background-color:颜色; 背景颜色 2.background-imge:url(路径); 盒子...

  • CSS样式-背景(background)

    CSS样式 css背景(background) CSS 可以添加背景颜色和背景图片, 以及来进行图片设置。 背景图...

  • CSS背景处理

    简介CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 CSS背景属性 背景图片(image) 语法: 参数...

  • web前端入门到实战:背景定位

    一、背景定位 同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色 1.在CSS中...

  • react 项目中引入图片的几种方式

    引用本地图片 导入图片路径 直接获取图片 导入背景图 css 中用正常 css 语法 组件中操作 style 属性

  • css背景及其应用(一)

    CSS 可以添加背景颜色和背景图片,以及来进行图片设置。 background-color背景颜色backgrou...

  • overflow:hidden意外作用

    web中插入背景图片 这两个css区别是有没有 至于为什么呢?我看到有的地方写的是插入图片时会撑开父元素几像素,我...

  • css背景和精灵图

    css背景和精灵图 背景 1.如何设置背景图片? 在CSS中有一个叫做background-image: url(...

  • CSS使用img做背景并且内容等比缩放

    相关资料:css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况CSS 背景CSS...

网友评论

      本文标题:CSS中的背景和图片的区别

      本文链接:https://www.haomeiwen.com/subject/umfxiftx.html