asp.net - CSSで背景画像を拡大する

Question

重複の可能性：
CSS画像の背景を拡大および拡大縮小-CSSのみ

初心者の質問：これは基本的な質問かもしれませんし、いくつかの基本的なアイデアが欠けている可能性があります。私はこの質問を見ましたが、それは私の問題に近いとは思いません。CSSで背景画像を拡大したい。これが私のCSSコード
CSSです：

.BackgroundColor
{
    background-position: center center;
    margin: 0px 0px 0px 0px;
    background-image: url('Content/Tulips.jpg');//this image i want to stretch
    background-repeat: no-repeat;
    width: 1000px;
    height: 1000px;
    padding: 0px 0px 0px 0px;
}

これが私のHTMLコード
HTMLです。

<div class="BackgroundColor">
    <div class="outerMost">
    <div class="heading" id="loginheading">
      Show Login  
    </div>
    <div class="MainSect">
        <div class="Label">
        <asp:Label ID="usernameLabel" runat="server" Text="UserName" ClientIDMode="Static"></asp:Label>
        </div>
        <asp:TextBox ID="UsernameTextBox" runat="server" CssClass="textboxes" ClientIDMode="Static"></asp:TextBox>
        <br />
        <asp:Label ID="PasswordLabel" runat="server" Text="Password" CssClass="Label" ClientIDMode="Static"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="textboxes"></asp:TextBox>
        <br />
        <asp:Button ID="LoginButton" runat="server" Text="Login"  
            BackColor="#00CCFF" BorderStyle="Solid" CssClass="loginButton" ClientIDMode="Static" />

    </div>
    <br />
    <br />
    <div>
        <asp:Label ID="Label1" runat="server" Text="Date of Birth" CssClass="Label"></asp:Label>
        <asp:TextBox ID="CalenderTextBox" runat="server" ClientIDMode="Static" CssClass="textboxes"></asp:TextBox>
    </div>
    <div id="tabSection">
        <ul>

            <li><a href="#basicInfo">Basic info</a></li>
            <li><a href="#Products">Products</a></li>
            <li><a href="#SavingAccount">Depositer</a></li>
        </ul>
        <div id="basicInfo">
        Basic Info will be mentioned here and bla bla bla
        </div>
        <div id="Products">
        Products and other releases should be mentioned here

        </div>
        <div id="SavingAccount">
        Information about saving account should be mentioned here and bla bla bla
        </div>
    </div>
    </div>
    </div>

そのため、ページに背景画像を設定したいと思います。内部コードは無視してください。Style builder画像のストレッチに関するプロパティが表示されないため、画像のストレッチを手伝ってください。私が言及した上記のリンクは、HTMLで画像を拡大していますが、CSSでそれを実行したいと思います。
編集： 私のCSSエディターはCSS2.1まで表示されるので、VisualStudioにCSS3を含める方法を教えてください
ありがとうございます

score 8 · Accepted Answer

background-size: coverCSS3では、ここに記載されているように簡単に使用できます。

cover：画像の本来のアスペクト比（存在する場合）を維持しながら、画像の幅と高さの両方が背景の配置領域を完全にカバーできるように、画像を最小サイズに拡大縮小します。

それ以外の場合は、この回答を参照してください。

score 6 · Accepted Answer

6

私はこれがあなたが探しているものだと思います：

background-size: 100%;

于 2012-09-08T15:53:27.613 に答える

score 3 · Accepted Answer

あなたはbackground-sizeを使うことができます：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

これがそのデモです：

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size2

background-size:100%;

score 2 · Accepted Answer

使用する：

  background: url(yourimage.jpg) no-repeat;
  background-size: 100%;

それはうまくいくはずです。

score 1 · Accepted Answer

背景画像で画像を引き伸ばすには、cssで100％にする必要があります。pxを％に変更し、背景サイズも追加します= 100％cssは

.BackgroundColor
{
background-position: center center;
margin: 0px 0px 0px 0px;
background-image: url('Content/Tulips.jpg');//this image i want to stretch
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
padding: 0px 0px 0px 0px;

}

score 1 · Accepted Answer

他の人が同じ問題に遭遇した場合にそれを見つけるためだけに。私の質問の一部が SO ユーザーによって回答されなかったためです。私はそれを検索して答えを見つけたので、その部分に答えてい
ます。これは誰でもCSS3インテリセンススキーマをダウンロードできるリンクです。
http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210
インストールすると、Visual Studio の CSS3 が CSS エディターに表示され、そこから選択できます。そして、プロパティを使用します

background-size: 100%;

score 0 · Accepted Answer

0

100% の幅と高さを使用します。

于 2012-09-08T15:58:31.477 に答える

asp.net - CSSで背景画像を拡大する

7 に答える 7

Related

Reference