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

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

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

信各位一定碰到过这种情况，按钮作为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等主流浏览器吗？具体详情分享》版权归原作者所有,内容不代表本站立场！

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

推荐阅读

  • 倒数日怎么删除不用的事件

    倒数日怎么删除不用的事件

    倒数日是一款倒计时软件，添加的事件可以进行删除，进入事件编辑即可删除。具体操作方法如下： 倒数日怎么删除不用的事件 1、打开手机倒数日app，点击需要删除的事件，进入事件页面。 2、点击右上角笔的标...

    阅读: 829

  • 怎么关闭零钱通

    怎么关闭零钱通

    零钱通是微信中的一个理财产品，如果需要关闭，在零钱通的设置中直接关闭即可。具体操作方法如下： 怎么关闭零钱通 1、打开手机微信app，点击我”。 2、点击服务”。 3、点击...

    阅读: 856

  • qq听歌状态怎么显示听的歌

    qq听歌状态怎么显示听的歌

    qq听歌状态可以显示正在QQ音乐听的歌，设置听歌状态后进入QQ音乐听歌即可。具体操作方法如下： qq听歌状态怎么显示听的歌 1、打开手机QQ软件，点击头像上的状态，进入状态设置。 2、找到并点击听歌...

    阅读: 933

  • qq相册怎么转移到另一个qq

    qq相册怎么转移到另一个qq

    qq相册要转移到另一个qq，可以借助转载功能进行转移，使用QQ进入另一个QQ的相册即可进行转载。具体操作方法如下： qq相册怎么转移到另一个qq 1、打开手机QQ软件，点击联系人”，再点击...

    阅读: 876

  • 花呗账单日怎么修改

    花呗账单日怎么修改

    花呗的账单日可以通过修改还款时间来修改，修改花呗的还款时间后，出账单的日子也会改变，通过设置修改花呗的账单日的具体操作步骤如下： 花呗账单日怎么修改 1、打开支付宝app，先点击下方的我的&rdquo...

    阅读: 911

  • 抖音怎么0.5倍速播放

    抖音怎么0.5倍速播放

    抖音视频播放有四种倍速选择，要设置0.5倍播放，在视频播放中即可直接设置。具体操作方法如下： 抖音怎么0.5倍速播放 1、打开手机抖音app，进入视频播放，长按视频，进入播放设置页面。 2、点击倍速...

    阅读: 947

热门文章

最近更新