Question

为什么我使用下面的代码看不到图像。我想通过css文件加载它。 main.css也是index.php所在的位置。

<!DOCTYPE html>
<html>
<head>
    <title>Red Stone One Stop Shop</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css " />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    
    </script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" id="navbar">
    <div class="container">
        <a href="/ecommerce/index.php" class="navbar-brand" id="text">Red Stone One Stop Shop</a>
        <ul class="nav navbar-nav">
            <!-- Dropdown menu -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men  <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Pants</a></li>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
    <!--Inserting Images-->
    <div id="background-image">
        <div id="image-1"></div>
        <div id="image-2"></div>
    </div>
    <p>
        What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>

这是main.css文件

body{
    padding-top: 50px;
}

#navbar{
    /*background color: #FFF0000;*/
    background-color: #800000;
}

/*change color to white*/
#text{
    background-color: #000000;
    color: #FFFFFF;
}

#background-image{
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 60px;
    background-image: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-size: 100% 700px;
    background-position: top center;
    background-attachment: fixed;
}

#image-1{
    position: absolute;
    width: 100%
    height: 350px; 
    background-image: url(../images/ecommerce2.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 200px;
    top: -100px;
    left: -25px;
}

#image-2{
    position: absolute;
    width: 100%
    height: 190px; 
    background-image: url(../images/ecommerce1.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 50% 200px;
    top: 80%;
    margin-top: -90px;
}

我可以看到背景，但没有显示2张图片。谢谢你的帮助。

Answer 1

css语法错误，您在宽度属性

上缺少分号

@IBAction func goToView(sender: AnyObject) {  
    let secondVC =  storyboard?.instantiateViewControllerWithIdentifier("secondViewController") as! SecondViewController   
    self.presentViewController(secondVC, animated:true, completion:nil)  
}

Answer 2

更新 ＆＃34;＃image-2＆＃34; 和 ＆＃34;＃image-1＆＃34; 喜欢这样，

重要提示：在 ＃image-2 中添加＆＃34; left：50％＆＃34; >

#image-2 {
position: absolute;
width: 100%;
height: 190px;
background-image: url(https://blogs.thegospelcoalition.org/erikraymond/files/2015/10/i-love-you.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 50% 200px;
top: 80%;
margin-top: -90px;
left: 50%;
}

#image-1 {
position: absolute;
width: 100%;
height: 350px;
background-image: url(http://www.thephotoargus.com/wp-content/uploads/2016/01/I-Love-You-Photography-33.jpg);
background-repeat: no-repeat;
background-position: left bottom;
background-size: auto 200px;
top: -157px;
left: 0px;
}

＆＃13;

body{
    padding-top: 50px;
}

#navbar{
    /*background color: #FFF0000;*/
    background-color: #800000;
}

/*change color to white*/
#text{
    background-color: #000000;
    color: #FFFFFF;
}

#background-image{
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    height: 60px;
    background-image: url(http://media-s3.blogosfere.it/vitadicoppia/images/separarsi%20dopo%20pochi%20mesi.jpg);
    background-repeat: no-repeat;
    background-size: 100% 700px;
    background-position: top center;
    background-attachment: fixed;
}

#image-1{
    position: absolute;
    width: 100%;
    height: 350px;
    background-image: url(http://www.thephotoargus.com/wp-content/uploads/2016/01/I-Love-You-Photography-33.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto 200px;
    top: -157px;
    left: 0px;
}

#image-2{
        position: absolute;
    width: 100%;
    height: 190px;
    background-image: url(https://blogs.thegospelcoalition.org/erikraymond/files/2015/10/i-love-you.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 50% 200px;
    top: 80%;
    margin-top: -90px;
    left: 50%;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <title>Red Stone One Stop Shop</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css " />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scaleable=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">    
    </script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top" id="navbar">
    <div class="container">
        <a href="/ecommerce/index.php" class="navbar-brand" id="text">Red Stone One Stop Shop</a>
        <ul class="nav navbar-nav">
            <!-- Dropdown menu -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="text">Men  <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Pants</a></li>
                    <li><a href="#">Shoes</a></li>
                    <li><a href="#">Accessories</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
    <!--Inserting Images-->
    <div id="background-image">
        <div id="image-1"></div>
        <div id="image-2"></div>
    </div>
    <p>
        What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>

＆＃13;

图像不显示使用CSS

2 个答案: