问题标签 [background-repeat]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
210 浏览

html - 将图案重复到视口的 100%

在CSS中我做了那个代码:

但要将标题与内容分开,我想在它们之间有一个“栏”。

所以我做了:

但是酒吧并没有“无限”,它只是重复直到达到“1920px”我能以某种方式改变它吗?放在

没用

0 投票
1 回答
144 浏览

css - CSS - 具有线性渐变(生成 svg)的 IE9 问题背景图像无法正确重复

我试图在网上寻找这个特定问题的答案,但老实说,我真的不知道这里发生了什么。如果你想玩,我在这里创建了一个小提琴来显示情况。

这是适用于 Chrome、Firefox 和 IE10+ 的代码

HTML 代码

CSS 代码

我需要 IE9 的后备。正如您在小提琴中看到的那样,我已经生成了适用于 IE9 的 svg 图像。目前 div 为 113px x 14px,背景大小为 4px

问题是,如果宽度 > 113,则不再显示条纹,而是仅显示背景颜色。相反,如果我在某个点设置更高的高度,则条纹会再次清晰显示。

我该如何解决这个问题?它与什么有关?任何帮助表示赞赏。

0 投票
1 回答
450 浏览

html - 渐变边框不填充页眉和页脚部分

我在插入背景图像并使页眉和页脚部分具有渐变背景时遇到问题。我的背景图片必须重复。.gif 图片是否必须与 css 位于同一文件夹中?这是它的CSS。

我也在研究从白色到橙色到黑色的线性渐变。然后,此渐变将成为页眉和页脚部分的背景。我能够拆分并为页眉和页脚部分提供线性渐变背景,但它不会一直延伸到我的页眉和页脚的边界。这是标题的 html 部分

格式化html的css我有

0 投票
0 回答
546 浏览

css - 谷歌浏览器在带有“背景重复:重复”的图像周围显示白色“边框”

谷歌浏览器突然在我的图像周围显示一个精细的白色边框(不是实际边框),它具有背景重复属性。一定是因为 Chrome 更新,但我似乎无法摆脱它。

在此处输入图像描述 我在视网膜 mac 上运行版本 55.0.2883.95。Firefox、Safari 和 Chrome Mobile 都可以正常工作。你可以在这个网站上看到我的意思。

更新:显然这是因为我的视网膜屏幕的 hdpi 像素密度,所以这似乎是 Chrome 开发团队的一个问题。

0 投票
1 回答
433 浏览

css - CSS 失败 - 背景位置、背景重复、背景大小、背景附件

当我将以下内容放入divmainbody中时,这可以工作:

但是当我使用 CSS 时不起作用:

它似乎出了问题,因为我需要为每个背景提供不同的图片,然后这导致background-repeatetc 被忽略。(注意:不同的 div 也会有不同的显示值,要么是块,要么是无,所以它们也需要单独说明,但这不是问题。)

任何人都知道为什么以及是否有解决方法。

0 投票
1 回答
548 浏览

css - 添加背景图像后背景消失:无重复;

我正在尝试为我的 wordpress 网站设置背景图片。

这是我的带有背景图像的 CSS 代码。我调整了大小,因为图像

对我的网站来说相当大。和!添加 background-repeat: no-repeat 后,

背景不可显示。我只看到白色背景。

当然,我用谷歌搜索找到解决方案,但几乎所有人都在说

关于语法错误,但我在我的代码中找不到任何语法错误..

0 投票
1 回答
254 浏览

html - 不同浏览器上的 CSS 背景重复计数不一致

我使用重复模式作为 div 的背景图像:

test_pattern.png 是 25 像素宽,所以我希望它在 200 像素宽的 div 中重复 8 次。这正是我在 Safari 上得到的。但是,铬重复该图案的次数略多于 8 次。更奇怪的是,当我拍摄 chrome 页面的快照时,原来 div 的宽度是 220 像素,而不是 200!无论如何要在所有浏览器上保持一致?

Safari 和 chrome 渲染:

0 投票
1 回答
930 浏览

html - Background-repeat not working in internet explorer

I have found tons of topics about this, but nothing seems to work out.

My website consists of a main div, with all the content that takes 80% of the screens width. A div with a background is sticked to each side of the div, with a absolute position, like so:

Example of what I mean

Now, the side divs have an background-repeat: repeat-y style applied to it. The height of the html is 100%, and what I want works in all browsers, EXCEPT IN INTERNET EXPLORER (even in Edge, but I understood that it processes HTML and CSS differently from IE) (frustrations, sorry).

The code:

Is there somebody who can help me out?

Thanks in advance

-- JSFIDDLE --

https://jsfiddle.net/fwah7gr6/12/

So, this is the context of my website. There a 'banners' on each side of the website, but what happens in IE, is that those banners stop repeating after you scroll down (it seems like those banners take the height of the screen and not the parent (which is 100% in height). In the JSFiddle this of course works, because that would be normal behaviour. Let's say the page-wrapper has an height of 4000px in total, the banners only take the height of from the top to the bottom of screen height. When I open a console, and push the console up, the banners also get pushed up...

0 投票
1 回答
909 浏览

wordpress - wordpress 背景图像在移动设备中没有响应

我的网站是(https://www.yahoonewsz.com),我已经在服务器的 public_html 文件夹中上传了一张图片。

我使用以下代码作为背景

在 WordPress 的高级 CSS 部分。

为什么图片在手机上没有响应?

谢谢。

0 投票
2 回答
91 浏览

css - CSS repeat-x 但只是我想要的图像中的一部分

我用于background-size: cover移动屏幕尺寸。

但是,对于桌面,如果我使用background-size: cover,我看不到图像中的猫。因为,我的图像的原始尺寸是高度比宽度长得多。

所以,我想只重复我的图像中没有出现猫的部分。但是,如果我使用background-size: contain& background-repeat: repeat-x,我会看到以下内容:

当前的 (图中的猫出现了 3 次。)

我想要做的是类似于以下内容:( 我想要的是 只重复左右猫没有出现的部分。)

我用谷歌搜索了很多并阅读了 StackOverflow 中的几篇文章。但是,我找不到我想要的答案。如果您能给我任何建议,我将不胜感激!

* 以下是图片链接:

- [1st] https://postimg.cc/image/6pku8wgcr/

- [2nd] https://postimg.cc/image/rz8gjr4d7/

- [原始猫背景] https:// /postimg.cc/image/hcenege97/