完美的背景图全屏css代码 – background-size:cover?

这篇具有很好参考价值的文章主要介绍了完美的背景图全屏css代码 – background-size:cover?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法

需要的效果

  1. 图片以背景的形式铺满整个屏幕,不留空白区域
  2. 保持图像的纵横比(图片不变形)
  3. 图片居中
  4. 不出现滚动条
  5. 多浏览器支持

以图片bg.jpg为例

方法一、最简单,最高效的方法 CSS3.0

归功于css3.0新增的一个属性background-size,可以简单的实现这个效果,这里用fixed和center定位背景图,然后用background-size来使图片铺满,具体css如下

html {
background: url('../../../resources/images/welcome.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

这段样式适用于以下浏览器

  • Safari 3+
  • Chrome
  • IE 9+
  • Opera 10+ (Opera 9.5 支持background-size属性 但是不支持cover)
  • Firefox 3.6+

这里你会发现ie8及以下版本不支持,这些蛋疼浏览器则需要添加下面的css来设置兼容

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";

 

这个用滤镜来兼容的写法并不是很完美,首先是图片路径,这里只能是相对于根目录的路径,或者用绝对路径;然后是图片纵横比改变了,是拉伸铺满的形式。尽管如此,总比留空白好多了吧(如果背景图bg.jpg的宽高够大,则可以不用这段,变成简单的平铺,比图片变形效果好写,大家可以尝试下)

如果你觉得上面的方法不是很满意,那试试下面这种

方法二、

用img形式来实现背景平铺效果

首先在html中加入以下代码

<img src="bg.jpg" class="bg">

然后通过css来实现铺满效果(假设图片宽度1024px)

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
}

下面这个是为了屏幕小于1024px宽时,图片仍然能居中显示(注意上面假设的图片宽度)

 
@media screen and (max-width: 1024px) {
  img.bg {
    left: 50%;
    margin-left: -512px;
  }
}

 

兼容以下浏览器

  • 以下浏览器的所有版本: Safari / Chrome / Opera / Firefox
  • IE9+
  • IE 7/8: 平铺效果支持,但是在小于1024px的屏幕下居中效果失效

 

方法三、JQ模拟的方法html部分

  

<img src="bg.jpg" id="bg" alt="">

 

css部分

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

 

js部分

$(window).load(function() {
    var theWindow = $(window),
        $bg = $("#bg"),
        aspectRatio = $bg.width() / $bg.height();
    function resizeBg() {
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg.removeClass().addClass('bgheight');
        } else {
            $bg.removeClass().addClass('bgwidth');
        }
    }
    theWindow.resize(resizeBg).trigger("resize");
});

支持浏览器

  • 以下浏览器的所有版本: Safari / Chrome / Opera / Firefox
  • IE7+

 

 

其实我自己一般用的是(因为够用了,咱不挑/其实上面的都是俺翻译过来的)

html部分

<div class="bg"></div>

 

css部分

.bg{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(bg.jpg) no-repeat #000;
    background-size: cover;
    z-index: -1;
}

 

如果图片宽度没有达到1900px以上,我会加上ie的滤镜来支持ie8(这里我故意用了绝对路径,请知晓,代码长的我想砸了ie)

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://huilang.me/bg.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://huilang.me/bg.jpg', sizingMethod='scale');

 文章来源地址https://www.toymoban.com/news/detail-433414.html

到了这里,关于完美的背景图全屏css代码 – background-size:cover?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css设置background背景视频

    通过CSS设置背景视频可以使用HTML5的video标签。具体步骤如下: 1.在HTML中添加video标签,并设置class为bg-video。 2.在video标签中添加source标签,用于指定视频文件的路径和类型。 3.在CSS中设置bg-video的样式,包括绝对定位、宽高等属性。 4.在CSS中设置z-index属性,确保视频在其他元

    2024年04月10日
    浏览(91)
  • CSS中如何实现元素的渐变背景(Gradient Background)效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(62)
  • 封装了一个echarts图全屏放大的功能

    注意:1、没有监听屏幕的大小,我感觉没必要 2、如果是监听屏幕大小变化,直接echarts.resize()就行了。 1、initEcharts接收三个参数,参一为echarts渲染的目标元素 参二为echarts渲染的配置项 参三控制是否需要全屏放大的相关功能 2、screenFull 为控制某个元素放大的按钮,传递需要

    2023年04月25日
    浏览(35)
  • css 背景是个图片并且含有透明度的渐变色.超级简单。background相关属性就行了

    底纹是个背景图片。 然后上面有个渐变色。渐变色含有透明度这样才能把底纹显示出来 不用麻烦的把图片放进去各种定位修改层级来写啦。 直接一个background相关属性就行了。 背景色怎么增加透明度呢 使用rgba的方式rgba(127,47,255, 0.7 )。 //0.7是透明度

    2024年01月16日
    浏览(45)
  • 3种CSS实现背景图片全屏铺满自适应的方式

    01 url(images/beijing.png)——图片路径的位置; no-repeat—— 图片不重复; center 0px——center是距离页面左边的定位,0px是距离页面上面的定位; background-position: center 0——就是图片的定位,同上; background-size: cover;——把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    2024年02月11日
    浏览(42)
  • 微信小程序 background多个background背景图叠加以及连写注意事项

    background: url(\\\'https://xxxxxxxx.com\\\') no-repeat top/100% auto,linear-gradient(318deg, #3F0000 0%, #A9143A 100%); 效果: 坑点: 1:多个背景图叠加时(渐变也相当于图片)以逗号分割,越靠前图片叠加时层级越高。网上搜索时发现找到的都是说越靠后层级越高,但我测试的时候确实是越靠前越高。

    2024年02月15日
    浏览(59)
  • day40-3d Background Boxes(3D背景盒子转换)

    效果 index.html style.css script.js

    2024年02月15日
    浏览(45)
  • 一键去除图片背景——background-removal-js

    一些JavaScript库和工具可以帮助实现背景去除: OpenCV.js:OpenCV的JavaScript版本,提供了许多计算机视觉功能,包括背景去除。 Jimp:一个用于处理图像的JavaScript库,提供了许多图像处理功能,包括背景去除。 Canvas:HTML5的Canvas API可用于在JavaScript中绘制和处理图像,包括背景去

    2024年01月23日
    浏览(57)
  • Android Studio设置android:background 属性背景颜色

    除了默认的颜色之外都要自己添加。 添加颜色的操作步骤: 打开 res 文件夹,找 values ,里面有个 colors.xml 的文件。然后在里面定义一些颜色。   完成

    2024年04月28日
    浏览(45)
  • 首屏优化,给以图片为背景的元素增加相似背景,优化用户体验,background-image 绘制规则

    每日鸡汤:每个你想要学习的瞬间都是未来的你向自己求救 假设你的项目首页有个大大的图片作为背景,那么这个图片肯定会在网络不好的时候加载出来很慢,导致用户回看到一大片白屏,这样很影响体验。这也是老生常谈的首屏优化的问题。例如 我们可以给这个首屏元素

    2024年02月14日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包