标签: background-repeat

我想设置一个background-image但是在重复之间有一个特定的距离.

例如,我有这个图像成为background-image:

我希望以这样的模式修复重复:

检查JSFiddle游乐场

我正在寻找一个CSS3清洁解决方案,而不是JS,而不是额外的元素,等等.如果我必须使用非常现代的CSS3(不支持)技巧是可以的.

我可以在后台重复一部分图像[它在CSS精灵图像中]吗？

例如:

background-position:-13px top; background-repeat:repeat-y;

因为我重复了整个精灵图像......

是否可以重复背景图像,但在下一次重复开始之前指定一些像素.

即背景:url(img.png)[40px之后] repeat-x;

我不想在图像中添加空白区域.

我一直在玩space和的round价值观background-repeat。从理论上讲，这应该意味着我可以使用径向渐变在元素上创建漂亮的虚线边框，而不会将这些点切除。

.test {
  background-repeat: space no-repeat;
  background-size: 20px 10px;
  background-image: radial-gradient(circle closest-side, red calc(100% - 1px), transparent 100%);
  transition: background-image 0.5s linear;
  padding-bottom: 10px !important;
  background-position: left top;
  resize: both;
  overflow: auto;
  border: 2px solid;
  padding: 20px; 
  width: 310px;
}

https://jsbin.com/momiwokena/1/edit?css，输出

它在Chrome浏览器中可以很好地工作，但是在Safari中，一旦元素变得太宽，它就会停止工作，并在右侧切割掉点。

我怎样才能使Safari不至于断点？

编辑：这已与苹果公司提出。

我正在将我的应用程序的ActionBar移动到ActionBarSherlock,我正在尝试使用平铺背景自定义背景.我在2个真实设备上测试我的代码,一个运行Android 2.1,另一个运行Android 4.0.4.

下面的代码是在ICS设备上工作(背景重复)但不在Eclair上(背景被拉伸而不是重复).我也在Android 2.3模拟器上测试了它,背景也不重复.它似乎tileMode="repeat"只适用于ICS.

的themes.xml:

<style name="Theme.Opheodrys.Base" parent="Theme.Sherlock.Light">
    <item name="android:actionBarStyle">@style/Opheodrys.Widget.ActionBar</item>
    <item name="actionBarStyle">@style/Opheodrys.Widget.ActionBar</item>
</style>

<style name="Opheodrys.Widget.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
    <item name="android:background">@drawable/ab_background_pattern</item>
    <item name="background">@drawable/ab_background_pattern</item>
</style>

ab_background_pattern.xml:

<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ab_background_tile"
    android:tileMode="repeat"
    tileMode="repeat" /> <!-- I've added this just in case, but it doesn't seem to be needed -->

在Firefox上缩小到40%时,图像会消失.直到缩放50%,它很好.然而,在缩放40%时,它只是消失了:

在Chrome中,图像仍然可见,但稍有不对齐,这种情况发生在不同的缩放级别:

一旦Internet Explorer实际显示预期结果,无论缩放!

什么是三叉戟对webkit和gecko采取不同的做法,我该如何修补它？

以下是所有相关代码:

body {
  background-color: rgba(31, 59, 8, 1);
}
#main {
  z-index: 1;
  position: absolute;
  top: 113px;
  left: 50%;
  width: 900px;
  height: 100%;
  margin-top: 160px;
  background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
  background-repeat: repeat-y;
  margin-right: -50%;
  text-align: center;
  transform: translateX(-50%);
}
#main:before {
  content: " ";
  position: absolute;
  left: 0px;
  top: -113px;
  background-image: url('http://i.stack.imgur.com/7DE7i.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 113px;
}
#main:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -200px;
  background-image: url('http://i.stack.imgur.com/DVJAq.png');
  background-repeat: no-repeat;
  width: 900px;
  height: …

以前有人遇到过CSS的这种问题吗？

我有一个标题设置为100%宽度,左侧是一个图像(500px宽).我有一个背景图像,我想为水平剩余的空间填写,但不是图像的位置.因此,我设置background-position: 500px 0;并假设背景从距离浏览器左侧500px的距离开始.但事实并非如此.它只有在我将repeat-property设置为background-repeat: no-repeat;我花了1.5个小时试图找到一个没有运气的解决方案时才有效,并最终通过margin-left: 500px;在图像中添加一个标题和一个负500px边距来解决这个问题.我在这里错过了什么吗？为什么我不能告诉我的背景从x坐标500开始水平平铺？

我想得到这里显示的效果:

http://jsfiddle.net/abalter/k8G3C/

背景图像是透明的.徽标和文字叠加.

问题是,我希望背景图像重复.宽视口很好,但当视口变窄时,文本会通过图像的底部.

如果我做:

body {
  background: url(...);
  opacity: 0.6;
  background-repeat: repeat-y;
}

然后背景在y方向重复,但所有子元素也变得透明.我还没有找到一种方法,在没有子元素的情况下使图像透明.

我正在格式化背景图像,使其与视口一起缩放,但始终居中 - 图像的中间始终位于中间.("CSS-Only Technique#2")

有什么建议？

我读了几个关于这个主题的问题,我看到的一般反馈是JPGs用于照片,PNGs用于其他一切:

在以下情况下应使用PNG:

• 您需要透明度(1位或Alpha透明度)
• 无损压缩效果很好(例如图表或徽标,或计算机生成的图像)

在以下情况下应使用JPEG:

• 无损压缩效果不佳(例如照片)
• 需要全彩色

GIF应该在以下时间:

• PNG不可用,例如在非常旧的软件或浏览器上
• 动画是必要的

但是,似乎这些讨论更适合图像下载.我的问题更倾向于图像渲染.我打算在x和y方向重复背景......

background-image: url("/path/to/image.jpg");    /* repeat-x & repeat-y */

...我可以将图像存储为JPG~13K或PNG~50K.因此,尽管相差很小,但浏览器能够非常快速地提取这个图像.但是,当浏览器在页面上呈现图像时,这种差异是否重要,特别是因为它具有重复的背景？

当我把以下内容放入div主要内容时body,这个工作:

<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">

但是,当我使用CSS时,它不工作:

<style type="text/css" media="all">
.myMainDiv {
    width:100%;
    height: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
</style>

<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">

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

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

这是一个例子。我想裁剪背景图像，然后使用裁剪后的图像作为更大（尺寸）元素的背景。我的意思是 div 比它的背景大，而且我不需要重复。现在，当background-repeat取消注释时，元素就会消失。但我认为它会显示裁剪后的不重复背景。

#div {
  background-image: url(http://dummyimage.com/600x400/000/fff);
  padding: 10px;
  width: 100px;
  height: 100px;
  background-position: 0px -100px;
  background-size: 100px 100px;
  background-repeat: no-repeat;  /*comment this*/
  position: absolute;
}

<div id="div"></div>