相对于<div id =“logo”>图像</div>定位背景图像

时间:2013-09-06 06:01:44

标签: html css image background-position

我正在尝试定位延伸到浏览器窗口边缘的太阳光线的背景图像。太阳光线的中心必须直接出现在徽标图像的下方,徽标图像出现在容器div的左上角。容器居中,因此在调整浏览器大小时,背景图像和徽标图像应保持相对位置。

我尝试使用百分比作为背景位置:%%;但它没有很好地调整大小。我尝试使用一个不需要拉伸的非常大的图像,但是bg-pos:%%的成功效果不佳,另外还要创建一个700kb的图像(图像是透明的png叠加)。我一直在摆弄下面的组合并没有取得很大的成功。图像不会彼此“锁定”。

body {
   background: url(image.png); 
   background-position: % % | center; 
   background-size: cover|contain|% %; 
   background-attachment: fixed|scroll;
}

回顾一下:

  • 背景图片必须覆盖/延伸/延伸到整个浏览器窗口
  • 太阳光线中心必须直接出现在徽标
  • 下方 当浏览器窗口调整大小时,
  • 必须出现在徽标下面&lt; - 这是困难的部分

谢谢!

0 个答案:

没有答案