Question

我希望这张图片作为我的左背景图片，也是正确的背景图片。我可以使它左或右背景图像。但我希望这对左右两种都有效。我怎样才能做到这一点？这是我到目前为止的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WIMF.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <link rel="stylesheet" type="txt/css" href="Content/css/bootstrap.css" />
</head>
<body style="background: url(Content/images/vertical.jpg); background-repeat: repeat-y; background-position: left">
    <form id="form_id" runat="server">
           <div class="container">
            <h1>Where Is My Food</h1>
        </div>
        <div class="col-md-9 col-md-offset-2">
            <div class="input-group" style="float: left">
                <button type="button" class="btn btn-primary">WIMF</button>
            </div>
            <div class="input-group" style="float: left; padding-left: 20px">
                <asp:TextBox runat="server" ID="location" class="form-control" placeholder="Food/Restaurant/Location Name"></asp:TextBox>
            </div>
            <div class="input-group" style="float: left">
                <asp:Button runat="server" ID="search" class="btn btn-primary" Text="Search" OnClick="SearchButtonClicked" />
            </div>

            <div class="input-group" style="float: left; padding-left: 10px">
                <asp:TextBox ID="userName" runat="server" class="form-control" placeholder="User Name"></asp:TextBox>
            </div>
            <div class="input-group" style="float: left">
                <asp:TextBox ID="password" runat="server" class="form-control" placeholder="Password"></asp:TextBox>
            </div>
            <div class="input-group" style="float: left;">
                <asp:Button ID="logIn" runat="server" Text="Login" class="btn btn-primary" OnClick="LogIn" />
            </div>

            <div class="input-group" style="float: right">
                <asp:Button ID="signUp" runat="server" Text="Sign Up" class="btn btn-primary" PostBackUrl="~/Registration.aspx"/>
            </div>

            <div class="input-group" style="float: right;">
                <asp:Button ID="logOut" runat="server" Text="Logout" class=" btn btn-primary" OnClick="LogOut" />
            </div>

        </div>

        <div id="slide-show" class="col-md-8 col-md-offset-2" style="padding: 30px">
            <img id="slide-image" src="Content/images/big1.jpg" style="repeat: no-repeat; height: 300px" />
        </div>

        <div class="col-md-10 col-md-offset-1" style="padding-top: 20px">
            <div class="col-md-3 col-md-offset-1">
                <asp:Image ID="image1" runat="server" Height="200px" Width="200px" ImageUrl="~/Content/images/pizza.jpg" />
                <asp:Label runat="server" ID="Label17">Restaurant Name:</asp:Label>
                <asp:LinkButton runat="server" ID="restaurant1" /><br />

                <asp:Label runat="server" ID="Label23"> Food Item:</asp:Label>
                <asp:Label runat="server" ID="foodItem1"> Food Item</asp:Label><br />

                <asp:Label runat="server" ID="Label39">Price: </asp:Label>
                <asp:Label runat="server" ID="price1">Price </asp:Label><br />

                <asp:Label runat="server" ID="Label40">Rating:</asp:Label>
                <asp:Label runat="server" ID="like1">Rating</asp:Label><br />
            </div>

            <div class="col-md-3 col-md-offset-1">
                <asp:Image ID="image2" runat="server" Height="200px" Width="200px" ImageUrl="~/Content/images/pizza.jpg" />
                <asp:Label runat="server" ID="Label18">Restaurant Name:</asp:Label>
                <asp:LinkButton runat="server" ID="restaurant2" /><br />

                <asp:Label runat="server" ID="Label24"> Food Item:</asp:Label>
                <asp:Label runat="server" ID="foodItem2"> Food Item</asp:Label><br />

                <asp:Label runat="server" ID="Label37">Price:</asp:Label>
                <asp:Label runat="server" ID="price2">Price </asp:Label><br />

                <asp:Label runat="server" ID="Label38">Rating:</asp:Label>
                <asp:Label runat="server" ID="like2">Rating</asp:Label><br />
            </div>

            <div class="col-md-3 col-md-offset-1">
                <asp:Image ID="image3" runat="server" Height="200px" Width="200px" ImageUrl="~/Content/images/pizza.jpg" />
                <asp:Label runat="server" ID="Label19">Restaurant Name:</asp:Label>
                <asp:LinkButton runat="server" ID="restaurant3" /><br />

                <asp:Label runat="server" ID="Label25"> Food Item</asp:Label>
                <asp:Label runat="server" ID="foodItem3"> Food Item</asp:Label><br />

                <asp:Label runat="server" ID="Label3">Price: </asp:Label>
                <asp:Label runat="server" ID="price3">Price </asp:Label><br />

                <asp:Label runat="server" ID="Label4">Rating:</asp:Label>
                <asp:Label runat="server" ID="like3">Rating</asp:Label><br />
            </div>

        </div>

                <div class="col-md-10 col-md-offset-1" style="padding-top: 20px">
            <div class="col-md-3 col-md-offset-1">
                <asp:Image ID="image4" runat="server" Height="200px" Width="200px" ImageUrl="~/Content/images/pizza.jpg" />
                <asp:Label runat="server" ID="Label5">Restaurant Name:</asp:Label>
                <asp:LinkButton runat="server" ID="restaurant4" /><br />

                <asp:Label runat="server" ID="Label7"> Food Item:</asp:Label>
                <asp:Label runat="server" ID="foodItem4"> Food Item</asp:Label><br />

                <asp:Label runat="server" ID="Label9">Price: </asp:Label>
                <asp:Label runat="server" ID="price4">Price </asp:Label><br />

                <asp:Label runat="server" ID="Label11">Rating:</asp:Label>
                <asp:Label runat="server" ID="like4">Rating</asp:Label><br />
            </div>

            <div class="col-md-3 col-md-offset-1">
                <asp:Image ID="image5" runat="server" Height="200px" Width="200px" ImageUrl="~/Content/images/pizza.jpg" />
                <asp:Label runat="server" ID="Label13">Restaurant Name:</asp:Label>
                <asp:LinkButton runat="server" ID="restaurant5" /><br />

                <asp:Label runat="server" ID="Label15"> Food Item:</asp:Label>
                <asp:Label runat="server" ID="foodItem5"> Food Item</asp:Label><br />

                <asp:Label runat="server" ID="Label20">Price:</asp:Label>
                <asp:Label runat="server" ID="price5">Price </asp:Label><br />

                <asp:Label runat="server" ID="Label22">Rating:</asp:Label>
                <asp:Label runat="server" ID="like5">Rating</asp:Label><br />
            </div>

            <div class="col-md-3 col-md-offset-1">
                <asp:Image ID="image6" runat="server" Height="200px" Width="200px" ImageUrl="~/Content/images/pizza.jpg" />
                <asp:Label runat="server" ID="Label27">Restaurant Name:</asp:Label>
                <asp:LinkButton runat="server" ID="restaurant6" /><br />

                <asp:Label runat="server" ID="Label29"> Food Item</asp:Label>
                <asp:Label runat="server" ID="foodItem6"> Food Item</asp:Label><br />

                <asp:Label runat="server" ID="Label31">Price: </asp:Label>
                <asp:Label runat="server" ID="price6">Price </asp:Label><br />

                <asp:Label runat="server" ID="Label33">Rating:</asp:Label>
                <asp:Label runat="server" ID="like6">Rating</asp:Label><br />
            </div>

        </div>

        <div class="col-md-10 col-md-offset-2" style="padding-top: 30px">
            <div class="col-md-10" align="center">
                <a href="#" class="link">About</a>
                <a href="#" class="link" style="padding: 10px">Contact</a>
                <a href="#" class="link" style="padding: 10px">Blog</a>
                <a href="#" class="link" style="padding: 10px">Facebook</a>

            </div>
            <div class="col-md-10" align="center" style="padding-top: 20px">
                <p>Copyright</p>
            </div>
        </div>
    </form>
</body>
</html>

Answer 1

您可以使用多背景功能，第一个背景设置为左侧，第二个背景设置为右侧。要将其设置为左侧，您可以设置background-position:left top，将其设置为您可以设置background-position:right top的右侧。这是代码：

body {
  background:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-outline-128.png) left top,
            url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-heart-outline-128.png) right top;
  background-repeat:repeat-y;
}

在演示中，我使用了这张图片：

enter image description here

如何使用相同的背景图像作为左边框和右边框？

1 个答案:

Demo.