相关疑难解决方法(0)

我有一个项目,我正在使用固定的背景图像.它适用于除ios7之外的所有功能.在ipad上,背景图像被放大并且模糊.这是我正在使用的CSS代码 -

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

这是实时页面的链接 - www.wdeanmedical.com

我错过了什么？

我正在构建一个网页,我希望背景图像可以缩放以适应整个屏幕,保持纵横比并固定(因此,如果向下滚动,背景图像将保持在同一位置).

我已经在桌面浏览器中使用下面的CSS实现了这一点,但它无法在iPhone或iPad上运行.在这些设备上,背景太大(它继续在折叠下方),如果向下滚动得足够远,图像将开始重复.任何人都有修复？谢谢!

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我想在移动网页中创建一个带有背景的部分,所以我使用了以下CSS代码:

#section1{
    background: url("background1.png") auto 749px;
    height: 749px;
}

背景在Android(Chrome,Firefox ...)上正确显示,但在iPhone或iPad(Safari,Chrome iOS ...)上根本没有显示.我已经尝试在DOM准备好时使用jQuery设置这些属性,但没有运气.我读到大小可能有问题,但图像大约是700kB(1124x749px),因此它应该完成Safari Web Content Guide规则.哪个是问题？

我有一个像这个css的元素:

element.style {
    background-image: url(image.jpg);
}
.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

我现在正试图使它成为一个固定的位置,所以当我尝试执行以下操作时:

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: fixed;
    width: 100%;
    height: 200px;
}

该元素不再出现在页面上.

有一个元素包围这个元素:

.twentyseventeen-panel {
    overflow: hidden;
    position: relative;
}

这是html:

<article id="panel1" class="twentyseventeen-panel  post-47 page type-page status-publish has-post-thumbnail hentry">


        <div class="panel-image" style="background-image: url(https://2017.wordpress.net/wp-content/uploads/2016/10/pexels-photo-30724-2000x1200.jpg);">
            <div class="panel-image-prop" style="padding-top: 60%"></div>
        </div><!-- .panel-image -->


    <div class="panel-content">
        <div class="wrap">
            <header class="entry-header">
                <h2 class="entry-title">Our Drinks</h2>

            </header><!-- .entry-header …

我有一个wordpress网站并使用Twenty Seventeen主题,我喜欢Front Page Sections上的滚动功能,就像在这个演示中一样:

https://2017.wordpress.net/

现在我试图让滚动功能​​在移动设备上工作,但是当我看到CSS时我发现了这个

.background-fixed .panel-image {?    
   background-attachment: fixed;
}

但我知道背景附件在移动设备上效果不佳.有没有人知道一个工作,我发现和在线尝试的一切都不起作用.

我使用以下CSS来固定固定的身体背景.除了新的iOS7之外,它几乎适用于所有浏览器.在后者上,背景不再固定.它随页面滚动.知道如何解决这个问题吗？

body
{
background-color: #000; 
background-image: url('../pics/backgrounds/blackWhite.jpg');
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;     
} 

干杯

所以我正在建立一个网站，并希望它具有响应性和移动兼容。我一直在使用 Chrome DevTools 通过不同型号的设备查看该站点，它似乎没问题。无论如何，在我的手机上使用localtunnel对其进行了测试，背景图像与 DevTools 上的视图位于不同的位置。

DevTools 总是 100% 准确吗？或者这与 localtunnel 有某种关系，还是完全不同的东西？

尝试在网上查找，找不到有关 DevTools 不准确的任何信息。

提前致谢，杰克

我正在尝试找到解决我在 iOS 设备上使用固定背景的问题的方法。我宁愿不必为这个网站重新设计所有东西，我希望一些 CSS 更改可以解决它。这就是网站在 iPhone 上的样子，这也是它应该有的样子。我使用的 CSS 代码如下：

.container {
    min-width: 320px;
    max-width: 480px;
    margin: 0 auto;
}

.fixed-background {
    height: 800px;
    -webkit-backgound-size: cover;
    -o-backgound-size: cover;
    -moz-backgound-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    overflow: auto;
}

我还尝试使用@media查询来修复它，使用 stackoverflow 上的一些帖子，但这似乎没有任何效果：

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) {
    .fixed-background {
        background-attachment: scroll;
    }
} 

HTML

<div class="fixed-background bg-1">
    <div class="container">
        <div class="title">
            <h1>ROOK PROPERTY<br>MANAGEMENT INC.</h1>
            <h2>CONDOMINIUM MANAGEMENT</h2>
        </div>
    </div> …

我正在一个网站上工作,该网站具有高分辨率的背景图像.使用以下CSS设置背景图像

#intro {
background: url(https://s3.amazonaws.com/ooomf-com-files/XIBPemROQ9iJdUMOOBmG_IMG_1863.jpg) no-repeat 50% 50% fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}

在我的桌面上查看它工作正常.

在Firefox的响应式视图中查看时,它按预期工作.

但是,当我在装有iOS 7的iPhone 5上查看时,它会产生这个效果.

设置时出现问题

background-size: cover;

但我似乎无法弄明白.我已经在互联网上搜索过了.

站点本身,在开发环境中:

http://websites.terarion.com/ehlen/

我得到背景的地方:

http://unsplash.com/