zoukankan      html  css  js  c++  java
  • background-size属性的几个实用的值

    先来看w3c的background-size的几个值:

     background-size:cover;    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

     background-size:contain;  把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

    在项目中经常会使用一张背景图当作网页背景,我一直使用的是 background-size:cover; cover这个值是使背景图铺满全屏,但是背景图片可能显示不完全。

    后来发现 background-size:100% 100%;  可以使图片铺满全屏并且使背景图片显示完全(荡然不同屏幕下背景图片会被拉伸或缩小),这个值相对于cover来说,更适合用来设置全屏背景,尤其是自适应宽高的网页中。

    还有个 background-size:contain;  这个就是把背景图等比例缩放,尽量适应屏幕。

  • 相关阅读:
    解决input获取焦点时底部菜单被顶上来问题
    JavaScript学习笔记
    JavaScript表单验证
    js 中{},[]中括号,大括号使用详解
    陀飞轮
    娱乐天空
    左右手
    软测 学习
    git 学习
    spring boot 学习
  • 原文地址:https://www.cnblogs.com/sapho/p/7054825.html
Copyright © 2011-2022 走看看