CSS 将比例转换为背景图像

2023-12-08

我很喜欢 CSS 部分对图像的影响

.split-banner .right-cl:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

我需要将上面的 CSS 应用到 div 元素中包含的背景图像 我怎样才能做到这一点?


Change background-size悬停时。模仿scale(1.1) use 110%.

div {
  width: 560px;
  height: 400px;
  background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center center no-repeat;
}
div:hover {
  background-size: 110%;
}
<div></div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 将比例转换为背景图像 的相关文章

  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页
  • AJAX 加载的图像在 Safari 中无法正确显示

    因此 我使用 AJAX 加载每个页面的内容并将其注入当前页面 在 Chrome Firefox Internet Explorer 上一切都运行良好 尽其所能 哈哈 并且除了两个奇怪的部分之外 内容在 Safari 上加载良好 通过 AJA
  • iPhone 地址栏阻止了 HTML 页面标题按钮?

    我有一个带有两个标题按钮的移动网站 在 iPhone 上的纵向模式下 效果很好 我可以按按钮 问题是这样的 当我切换到纵向模式并尝试点击按钮时 本机 iPhone 地址栏就会显示 它位于标题上方 因此我无法按按钮 图片显示了问题 按一个按钮
  • 将 String 转换为 byte,然后转换为 int

    我发现了很多关于这个主题的问题 但我无法解决我的问题 用户将输入一个名字String我需要将其转换为List
  • 如何强制 中的两个元素始终保持在同一行

    代码非常简单 table style width 100 border 0 background color white cellpadding 0 cellspacing 0 tr td style border 0 padding 0
  • 如何使用 CSS 绘制一个向左的三角形?

    我已经很久没有建造这个向上的三角形了 我怎样才能改变我的 CSS 使角指向左边 http jsfiddle net 3sP8q http jsfiddle net 3sP8q left corner width 0 height 0 bor
  • 如何将安全中心与 Flexbox 一起使用?

    居中的弹性盒项目可能会出现不良行为当他们溢出容器时 https stackoverflow com questions 33454533 cant scroll to top of flex item that is overflowing
  • height:100% 在 Internet Explorer 中不起作用

    我有一个关于 CSS 属性的问题height 100 在 Internet Explorer 中 height 100 在 IE 中不起作用 但在 Firefox 和 Chrome 中可以 HTML 文件 div ul ul div
  • 推迟未使用的 CSS

    我有一个关键的 CSS 流程 可以防止页面首屏内容出现无样式内容闪现 FOUC 我陷入了 推迟未使用的 CSS 这一点 Google PageSpeed 见解 灯塔 和 或 Chrome 的性能审核强调了这一点 我已经阅读了其他文章 但它们
  • 容器中的等间距 div

    这是我的例子 http jsfiddle net rtCP3 62 http jsfiddle net rtCP3 62 我有 3 个 或更多 div 我想在一个容器中均匀分布 当将 Angular 与 ng repeat 一起使用时 样式
  • css 变换,chrome 中的锯齿状边缘

    我一直在使用 CSS3 转换来旋转网站中带有边框的图像和文本框 问题是 Chrome 中的边框看起来呈锯齿状 就像没有抗锯齿的 低分辨率 游戏一样 在 IE Opera 和 FF 中看起来好多了 因为使用了 AA 仍然清晰可见 但也没有那么
  • 在原始颜色和设置颜色之间设置动画背景

    我有带有随机初始背景颜色的 HTML 元素 我需要在原始 初始 和新元素之间对选定元素的背景颜色进行动画处理 我一直在尝试使用 keyframes blink red 0 background color initial color ini
  • ng-show 令人不安的 div 布局 - angularJS

    我在用ng show notesOpened 如果notesOpened 变量为true 则隐藏div 然而 当隐藏时 它会扰乱布局 有没有办法让 ng show 的行为与 css 属性相同visibility hidden 以便被隐藏的
  • 角度错误:冲突:多个资源向同一文件名 file.svg 发出不同的内容

    我有这个css in my component scss file bg background url assets images file svg center center no repeat 并且该路径中只有一个 svg 文件 因此每
  • ASP.Net MVC:如何在 CSS 文件中使用 razor 变量

    根据我的场景 我需要存储这个路径 img 产品 pngrazor 变量中的图像 后来我想在 CSS 文件中使用该 razor 变量 下面的css代码在css文件中 test background url img product png no
  • 当放置在 css 中时,为什么 Firefox 无法读取带有空格的图像路径?

    例如 CSS 中类似这样的规则 div something background image url http i2 photobucket com albums y24 5609903697 Beyond Birthday BB39 jp
  • Mousemove视差效果移动div的位置

    我正在尝试创建轻微的视差效果 我不确定它是否真的构成视差 但这是一个类似的想法 其中有四层 当鼠标移动时 它们以略有不同的速率移动 我找到了一个很好的例子 它提供了与我想要的类似的东西 http jsfiddle net X7UwG 2 h
  • CSS悬停边框而不调整图像大小

    我想问一下 在不调整图像大小的情况下 我的悬停边框下方功能做错了什么 我已按照给出的指南进行操作here https css tricks com image rollover borders that do not change layo
  • 如何选择带有空格的类

    我如何选择一个类class boolean optional 我已经尝试过这个 boolean optional CSS boolean optional CSS 正如 Zepplock 所说 这实际上是一个属性中的两个类 boolean
  • 如何切换整个页面的深色主题?

    我已经成功地在 html 和 Flask 中按下复选框时切换深色主题和浅色主题 但是我怎样才能让深色主题覆盖整个页面 而不仅仅是一些 div 元素呢 边距仍然是浅色主题 CSS代码如下 container display flow widt

随机推荐