相关疑难解决方法(0)

我希望我的背景图像拉伸和缩放取决于浏览器视口大小.

我已经在Stack Overflow上看到了一些关于完成这项工作的问题,例如Stretch和缩放CSS背景.它工作得很好,但我想使用background而不是使用img标签来放置图像.

在那个img标签中放置一个标签,然后用CSS我们向img标签致敬.

width:100%; height:100%;

它有效,但这个问题有点陈旧,并指出在CSS 3中调整背景图像的大小将会很好.我试过第一个这个例子,但它对我来说没有用.

是否有一个很好的方法来做background-image声明？

我在下面的div中有一个背景图像,但图像被切断了:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

有没有办法显示背景图像而不切断它？

我试图向IE添加背景大小,但它根本不起作用:

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

CSS:

div#content h2#news {
    background: url('../images/news-background.jpg') no-repeat;
    background-size: 100%;
    border-radius: 20px;
    color: #fff;
    margin: 20px 0 0 20px;
    padding: 8px 20px;
    width: 90%;
    -moz-background-size: 100%;
    -moz-border-radius: 20px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 20px;
}

过滤器有什么问题？

我想创建这样的按钮:

在现代浏览器中,使用插入框阴影和滤镜创建效果.
对于IE8 - 选择伪元素.
对于IE7 - 我使用包含在条件注释中的特殊标签.

演示:(http://jsfiddle.net/8M5Tt/68/)

/**
 * Button w/o images
 */
html {
    font-size: 62.5%;
    }
body {
    font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif;
    }
 
/* layout */
.btn {
    display: inline-block;
    height: 28px;
    border-width: 1px;
    border-style: solid;
    width: 170px;
    box-sizing: content-box;
    overflow: hidden;
    position: relative;
    z-index: 1;
    }
.btn {
    margin: 15px;
    }
.btn.btn_small {
    width: 130px;
    }

/* ie7 */
.lt-ie8 .btn .before,
.lt-ie8 .btn .after {
    position: absolute;
    right: …

我有一个<div>背景图片.

该<div>尺寸可在该时间而改变.

是否可以设置Divs背景图像以适合<div>大小？

让我说我有一个div 400x400和一个图像1000x1000,是否可以缩小图像400x400,因此适合<div>大小？

是否有一个polyfill来处理Safari 4(iOS)和IE中的CSS背景大小调整

我知道IE7不支持background-size cover.

我搜索了一些解决方案的网络,但我所拥有的唯一的事情是,我应该把img与width: 100%和height:100%,并把它作为背景.

这是唯一的解决方案吗？我已经看到了一些解决方案,-ms-filter但它没有用.有没有人有其他解决方案？

1特别之处:我有超过1 div这个background-size封面属性.

在Firefox中一切正常(多么令人惊讶).

Edit1:我的代码如下所示:

<div class="section" id="section1">here should be the first picture as the background!!</div>
<div class="section" id="section2">here should be the second picture as the background!!</div>
<div class="section" id="section3">here should be the third picture as the background!!</div>

出于某种原因,我的背景大小在IE 7和8中不起作用.谁能告诉我为什么.同样在IE检查器中,background-size属性未显示.

<a href="" class="twitter-custom-follow-button"></a>

.twitter-custom-follow-button {
  float: left;
  width: 96px;
  height: 20px;
  background: url(../img/slices/btns/twitter_follow.png);
  background-size: 96px 20px;
  background-repeat: no-repeat;
}

这适用于支持的浏览器background-size.否则2x图像被缩放.

.a {
  background-image: url(img2x.jpg); /* 1000x1000 */
  background-size: 100%;
  height: 500px;
  width: 500px;
}

这应该用于没有background-size支持的浏览器.

.a {
  background-image: url(img1x.jpg); /* 500x500 */
  height: 500px;
  width: 500px;
}

是否有可能在background-size不支持时欺骗浏览器回退？我知道我可以使用,@supports但background-size在这种情况下它的支持要少得多.我也不想使用JavaScript.

基本上是这样,除了工作!

.a {
  background-image: url(img1x.jpg); /* 500x500 */
  height: 500px;
  width: 500px;
  /* stop parsing this rule when background-size is not supported */
  /* otherwise continue parsing and set different background-image */
  background-size: 100%;
  background-image: url(img2x.jpg); /* 1000x1000 */
}

这显然不起作用,但有没有一个技巧可以使它工作？谢谢.

所以我有一个带背景图像的div; 这个div可以根据div的空间内容/大小增加高度和宽度.

但是,无论我希望背景图像的大小是100%显示,这是因为背景图像周围有边框,我需要显示那些按钮效果.

div.leadgen {
  background: url(/Website6/Styles/leadgen_center.png) repeat-x;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
}

<div class="leadgen">
 <h3>
  This is the title
 </h3>        
 This is the description
</div>

编辑

#solutionsNav div.leadgen {
background:url(/images/leadGen_bg2.png) no-repeat;
background-size: 100% 100%;  
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/leadGen_bg2.png', sizingMethod='scale')";
behavior: url(/scripts/PIE.htc);
padding: 10px;
color: #FFF;
cursor: pointer;

}

这适用于所有浏览器!我唯一需要弄清楚的是在IE 7和8中我不想使用background:url(/images/leadGen_bg2.png)no-repeat; 因为它似乎加倍了.