标签: background-position

我需要在CSS的网页顶部中心放置一个图像。现在，我只是使用background-image:in css，但这将其放在页面的中间。

这是我的代码：

body {
  background-image: url("theimageurlgoeshere"); //The image is 842 x 508
  background-attachment:fixed;
  background-position: center top;
  background-repeat: no-repeat;
}

此外，更改外观background-position:似乎对网站的结果没有影响。任何帮助表示赞赏。

我需要将我的背景放在屏幕的底部.但在移动设备分辨率上,我希望将其显示为低于100px,例如"bottom minus 100px".是否可以在CSS中实现这样的功能？

出于某种原因,我不完全确定原因,但以下是行不通的.悬停时背景位置保持不变.我无法弄清楚为什么.我可以用另一种方式做到,但我想尝试找到它为什么不起作用的底部.

#nav a:link, #nav a:visited {
    background:url(../img/nav-sprite.png) no-repeat;
    display:block;
    float:left;
    height:200px;
    padding:10px;
    text-indent:-9999px;
    border:solid 1px red;
}

    #nav a#home {
        background-position:-10px 0px;
        width:30px;
    }
    #nav a#about-us {
        background-position:-85px 0px;
        width:45px;
    }

#nav a:hover    {
    background-position:1px -15px;
}

有人知道是什么原因引起的吗？

提前致谢!

瑞安

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

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

我的问题被提到我一直在开发的这个网站.看到里面有4个圆圈和4个按钮的地方？这是他们的相关CSS:

/* STEPS HIGHLIGHT */
.steps {
background: transparent url(img/bg-steps.gif) 37px 92px no-repeat;
    clear: both;
    float: left;
    text-transform: uppercase;  
} 
.steps .col {
    margin-top: 15px;
    text-align: center;
}
.col.steps-1 {
    width: 194px;
}
.col.steps-2 {
    margin-left: 40px;
    width: 196px;
}
.col.steps-3 {
    margin-left: 21px;
    width: 232px;
}
.steps .col.last {
    margin-left: 11px;
    width: 226px;
}
.steps .col.last h3 {
    margin: 0 auto;
    width: 129px;
}
.steps h2 {
    font: 24px 'ProximaNovaLight';
}
.steps h3 {
    color: #7f7f7f;
    display: …

我有一个图像精灵,它是主div的背景,里面有十几个链接.我想在jQuery中使用jQuery,而不是在每个链接的CSS文件中写入背景位置的值,以便背景位置y增加550px(x位置将保持不变).

标记:

<div class="compass">
    <a class="facebook" href="#">&nbsp;</a>
    <a class="twitter" href="#">&nbsp;</a>
    <a class="youtube" href="#">&nbsp;</a>
</div>

CSS:

.compass {
    background-image: url('../images/compass.png');
    background-position: top;
    height: 550px;
    position: relative;
    width: 567px;
    margin: 0 auto;
}
.compass a{
    background-image: url('../images/compass.png');
    background-position: top;
    display: block;
    position: absolute;
}
a.facebook {
    height: 51px;
    width: 26px;
    left: 151px;
    top: 190px;
}

因此,我们的想法是为每个链接编写一个CSS规则样式,指示背景图像的x和y位置.然后,在悬停时,y位置将增加550px.在mouseout上,它会回到热点(减少550px).

我已经启动了jQuery语法,但无法弄清楚:

var originalPosition = obj.css('background-position');
$(".compass a").hover(
    function(){
        $(this).css('backgroundPosition', originalPosition + 550 + "px")
    },
    function(){
        $(this).css('backgroundPosition', "");
    }
)

非常感谢你们!

我有一个包含2个背景图像的页面,其中一个需要显示在页面的最底部.目前我已经实现了这样:

body {
    background-image: url('/cheri/image/background.png'), 
                      url('/cheri/image/backgroundB.png');
    background-position: top, bottom;
    background-repeat: repeat-x, repeat-x;
}

当页面内容高于浏览器窗口时,此工作正常,但如果页面内容较小,则在背景图像下方留下空的空白区域,如下图所示:

http://img198.imageshack.us/img198/4560/screenshot20120916at851.png

我试图将body设置为position:absolute,height:100%,但是当滚动存在时它没有正确呈现.我还试图为背景图像创建一个单独的div并将其绝对定位到底部,但由于我对底部出现的某些元素有不同的位置属性,因此z-indexing无法正常工作.

谢谢你的帮助!

我正在努力缩短我的CSS代码的背景图像位置(中心)和背景大小(封面).

每当我使用下面的代码时,它的工作正常,很明显:

HTML:

<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>

CSS:

.banner-divider{
width: 100%;
height:600px;
}
#banner-divider-welcome{
background: url(/images/welcome.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-second{
background: url(/images/second.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我想缩短/删除中心的多个CSS重复并覆盖属性(因为我有多个横幅ID但具有重复的背景设置),但是下面的代码不是居中并正确覆盖图像:

HTML:

<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>

CSS:

.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat
background-position: center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background: url(/images/welcome.jpg); 
} …

我正在尝试创建一个按钮,其中包含覆盖整个按钮的渐变,然后只在按钮的一部分上显示图像.

(注意:为了便于解决问题,我已将代码更改为div,但结果仍然相同)

最初这是成功的:

<div class="myBtn_1">test button one</div>

.myBtn_1    
{ 
  border: solid 1px #ff00ff;
  background-image: url('https://picsum.photos/21?image=1080'), 
     linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1)); 
  background-repeat:   no-repeat;
  background-size:     auto 100%;
  width:               200px;
  height:              50px;
  padding-left:        65px; 
}

代表这个的jfiddle可以在这里找到:

但是我想在按钮/ div中围绕我的图像边框,所以我添加background-position 5px 5px到css,以及明确设置背景大小(自动40px).这确实为图像添加了填充,但它也为渐变添加了填充.

再次,看到同一个jfiddle中的第二课

问题:如何在css中创建一个具有覆盖整个背景的渐变的按钮/ div,然后添加一个在其周围有填充的图像？

我正在尝试使用background-position和 百分比值制作一个简单的可拖动背景。到目前为止，我设法使拖动工作正常，但我似乎无法找到图像以相同速度跟随光标的正确计算（如果有意义的话）。

这是一个简单的示例（仅使用x轴）：

const container = document.querySelector('div');
const containerSize = container.getBoundingClientRect();

let imagePosition = { x: 50, y: 50 };
let cursorPosBefore = { x: 0, y: 0 };
let imagePosBefore = null;
let imagePosAfter = imagePosition;

container.addEventListener('mousedown', function(event) {
  cursorPosBefore = { x: event.clientX, y: event.clientY };
  imagePosBefore = imagePosAfter; // Get current image position
});

container.addEventListener('mousemove', function(event) {
  if (event.buttons === 0) return;

  let newXPos = imagePosBefore.x + ((cursorPosBefore.x - event.clientX) * 100 / …