• 首页>
  • 软件教程>
  • CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器吗？具体详情分享

CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器吗？具体详情分享

2024-06-24 10:42:11阅读量：35 字体：大 中 小

信各位一定碰到过这种情况，按钮作为DIV的背景图来显示，实际上有多个这样的按钮，而且DIV中的文字，也就是按钮上要显示的文字内容和个数都不定，这种情况下就需要用背景图片拉伸效果来处理了，只需做一个按钮图片，作为DIV的背景图时随着DIV的宽度或高度自适应就OK了。网上也找过，但不兼容IE或有bug，下面贴出本人亲测代码，兼容主流浏览器，包括Firefox、Chrome以及 IE 等主流浏览器（IE使用滤镜效果实现）：

CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器吗？具体详情分享

定义好上述CSS后，就可以在页面中使用了，例如：


btn_bg样式中：width和height定义了背景图默认的宽高，假如这个不定义并且引用该样式的DIV也不定义宽度，那么背景图的宽度会拉伸至浏览器的宽度，另外可以指定DIV的宽度来拉伸背景图，如：


细心的你会发现，最后三行代码每行样式后都加了 9 这是指定在IE8及以下浏览器中的样式。

免责声明：

本文《CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器吗？具体详情分享》版权归原作者所有,内容不代表本站立场！

如本文内容影响到您的合法权益（含文章中内容、图片等），请及时联系本站，我们会及时删除处理。

推荐阅读

  • ipad pro怎么录屏

    ipad pro怎么录屏

    ipad pro设备有录屏的功能，有需要的用户可以去手机的控制中心内打开按键进行录屏，具体的操作步骤如下： ipad pro怎么录屏 1、进入手机的桌面中，从手机屏幕的右上角往下滑，呼出控制中心的界面...

    阅读: 901

  • 苹果平板如何隐藏app软件

    苹果平板如何隐藏app软件

    苹果平板没有隐藏app软件的功能，但是可以把app下载到资源库中，这样就不会显示在平板的桌面上，操作方法如下： 苹果平板如何隐藏app软件 1、打开平板的设置，点击主屏幕”按钮，进入主屏幕...

    阅读: 748

  • 荣耀x30如何升级鸿蒙系统

    荣耀x30如何升级鸿蒙系统

    荣耀x30手机升级鸿蒙系统需要去手机的设置内进行手动点击升级，系统会自动进行检测，具体的操作步骤如下： 荣耀x30如何升级鸿蒙系统 1、打开手机的设置，点击系统和更新”按钮，进入系统设置中...

    阅读: 859

  • 手机淘宝首页布局怎么变了

    手机淘宝首页布局怎么变了

    手机淘宝首页布局变了可能是开启了长辈模式，开启长辈模式的布局就会改变，可以通过设置改回原来的布局，具体操作步骤如下： 手机淘宝首页布局怎么变了 1、打开淘宝app，点击我的淘宝，再点击右上角的齿轮进入...

    阅读: 814

  • 强制解除小红书实名认证

    强制解除小红书实名认证

    小红书账号一旦实名认证过了就不能解除实名认证了，只能通过注销账号的方式来解除实名认证。具体的操作方式如下： 强制解除小红书实名认证 1、打开小红书，点击进入我”的界面，再点击右上角的三条横...

    阅读: 791

  • 快手怎么买热门

    快手怎么买热门

    上了快手热门的视频可以推送给更多的用户，让视频得到更高的热度，在快手买热门的具体操作方式如下： 快手怎么买热门 1、打开快手，点击左上角的三条横线”，进入功能栏”界面。 2...

    阅读: 768

热门文章

最近更新