background-image相关内容

CSS3背景图片过渡

我正在尝试使用 CSS 过渡制作“淡入淡出"效果.但我无法让它与背景图片一起使用...... CSS: .title a {显示:块;宽度:340 像素;高度:338px;颜色:黑色;背景:透明;/* 过渡 */-webkit-transition:背景1s;-moz-transition:背景1s;-o-transition:背景1s;过渡:背景1s;}.title a:悬停{背景:透明 ..
发布时间:2022-01-08 12:30:46 前端开发

在线性梯度上使用具有背景位置的百分比值

有没有办法让 background-position 取百分比值?目前,我的按钮仅适用于 width 和 background-position 的显式值. body {最小高度:100vh;显示:弯曲;弹性方向:列;justify-content:空间环绕;对齐项目:居中;}.按钮 {显示:弯曲;证明内容:中心;对齐项目:居中;文字装饰:无;白颜色;字体粗细:粗体;宽度:350 像素;高度 ..

是否可以使用背景图像制作响应式 div,该背景图像保持背景图像的比例,就像使用 <img> 一样?

母语不是英语,所以可能有更好的方法来塑造问题......无论如何: 我要创建的内容类似于此处的标题:http://thegreatdiscontent.com/adam-lisagor标题图像在所有屏幕尺寸中都完全显示,并且图像的纵横比当然总是正确的.这是使用 an 并使文本出现在 using position: absolute 上的. 但是如果你使用 css 作为背景图像而不是 , ..
发布时间:2022-01-04 18:41:58 前端开发

div 全宽中的响应式背景图像

我正在尝试弄清楚如何在 div 全宽和响应中制作背景图像.背景图像在整个页面的宽度上扩展(并且是响应式的),但图像的高度不是它的全高.它似乎以某种方式被切断了.我正在使用引导程序框架,我尝试这样做的原因是我想在图像上覆盖一些文本.我尝试了很多不同的东西,但似乎无法弄清楚,帮助! ..

CSS - 设置 Div 宽度 100% 并调整大小保持纵横比

我有一个带有背景图像的 div,它将覆盖标题幻灯片的一部分.我希望 div 的宽度始终为窗口大小的 100%,即使用户重新调整大小也是如此.高度应根据背景图像的纵横比而变化.背景图片的尺寸为 1500x406. 示例代码如下: HTML CSS .clearfix {宽度:100%;位置:相对;显示:块;边距:0;填充:0;边框: ..
发布时间:2022-01-04 18:36:43 前端开发

响应式网页设计:“如何使用 CSS 根据浏览器窗口大小调整背景图像的大小"?

我正在创建一个网站,我的所有产品图像都将根据浏览器窗口大小重新调整大小,所以我编写了一些媒体查询,其中使用了一个大图像并以不同的窗口大小重新调整了它的大小强> 我有一张在背景中使用的图像,我如何调整它的大小?我希望在 IE7 和 8 中的所有浏览器中都支持它. HTML CSS div{背景: url("http://canadianneighborpharmacy.net/ima ..

CSS 背景图像不显示

我有一个 HTML 文件,其中包含一个名为 img 的子目录,其中包含一个名为 debut_dark.png 的图像.在我的 CSS 文件中,我有: body {背景: url(/img/debut_dark.png) 重复 0 0;} HTML 文件具有 body 标记,并且确实适当地包含了 CSS 文件.我确信 CSS 文件已正确包含,因为其他所有内容均已正确格式化. 背景图像未显示 ..
发布时间:2022-01-02 13:15:57 前端开发

我们可以在多单元格表格中解决 chrome 中的表格行背景图像问题吗?

它经常被问到——但我还没有看到好的答案(我看了).如果您在 CSS 中将背景图像设置为表格行 - 该图像将在每个单元格中重复.如果您设置 position: relative (对于行)并设置 background-image: none (对于单元格),它可以解决 IE 上的问题,但不能解决 chrome 上的问题!我不能使用后台定位,因为有很多调用并且它们的大小各不相同.(而且图片不是对称的 ..
发布时间:2021-12-28 11:12:43 前端开发

如何强制浏览器在 CSS 中打印背景图像?

这个问题之前有人问过但该解决方案不适用于我的情况.我想确保打印某些背景图像,因为它们是页面不可或缺的一部分.(它们不是直接在页面中的图像,因为其中有几个被用作 CSS 精灵.) 针对同一问题的另一个解决方案建议使用 list-style-image,它仅适用于每个图标都有不同的图像,不可能使用 CSS 精灵. 除了创建带有内联图标的单独页面之外,还有其他解决方案吗? 解决方案 ..
发布时间:2021-12-27 23:53:20 前端开发

Google Chrome 扩展程序 - 无法使用 CSS 加载本地图像

我有一个简单的 Chrome 扩展程序,它使用内容脚本功能来修改网站.更具体地说,该网站的background-image. 出于某种原因,我似乎无法使用本地图像,即使它们已打包在扩展程序中. body {背景:#000 url('image.jpg') !important;背景重复:重复!重要;} 就是这样,最简单的 CSS……但它不起作用.浏览器不加载图像. 解决方案 你的 ..
发布时间:2021-12-24 11:07:44 前端开发