עבור לתוכן

Transparent Box בCSS

על-ידי LOTE
ב תכנות

Featured Replies

פורסם

http://www.w3schools.com/css/css_image_transparency.asp

עשיתי את אותו הקוד, אבל עם תמונה שונה.

CSS:

div.background  {
  width:500px;
  height:250px;
  background:url(download.jpg) repeat;
  border:2px solid black;

  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }

HTML:

<div class="background"><div class="transbox">
<p>BLA
</p>
</div>
</div>

תוצאה:

fznngtxhammj.jpg

1. ניסיתי בעזרת text-align:center להעביר את התיבה לאמצע, גם בdiv.background, גם בdiv.transbox וגם בdiv.transbox p וזה לא זז לאמצע.

2. התמונה יוצאת חתוכה ולא טוב, זה לא קשור לwidth / height בדקתי. איך אפשר לשנות את זה?

תודה

  • ציטוט
    • פורסם

    אם הבנתי נכון את השאלה שלך, אתה רוצה:

    * לשים תמונת רקע חוזרת מהפינה השמאלית ביותר

    * לשים תיבת טקסט שקופה מעט באמצע העמוד


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .background
    {
      background: url(klematis.jpg) 0 0 repeat;
    }
    .transbox
    {
      width: 400px;
      height: 180px;
      margin: 0 auto;
      background-color: #ffffff;
      border: 2px solid black;
      opacity:0.6;
      filter:alpha(opacity=60); /* For IE8 and earlier */
    }
    .transbox p
    {
      margin: 0;
      padding: 20px 30px;
      font-weight: bold;
      color: #000000;
    }
    </style>
    </head>
    <body>
    <div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
    </div>
    </div>
    </body>
    </html>

  • ציטוט
    • פורסם
    • מחבר
    אם הבנתי נכון את השאלה שלך, אתה רוצה:

    * לשים תמונת רקע חוזרת מהפינה השמאלית ביותר

    * לשים תיבת טקסט שקופה מעט באמצע העמוד


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .background
    {
      background: url(klematis.jpg) 0 0 repeat;
    }
    .transbox
    {
      width: 400px;
      height: 180px;
      margin: 0 auto;
      background-color: #ffffff;
      border: 2px solid black;
      opacity:0.6;
      filter:alpha(opacity=60); /* For IE8 and earlier */
    }
    .transbox p
    {
      margin: 0;
      padding: 20px 30px;
      font-weight: bold;
      color: #000000;
    }
    </style>
    </head>
    <body>
    <div class="background">
    <div class="transbox">
    <p>This is some text that is placed in the transparent box.</p>
    </div>
    </div>
    </body>
    </html>

    תודה רבה, אך זה לא הבעיה. הייתי צריך להכניס margin:auto;

    עשית את הrepeat כמו שצריך, זה באמת עזר, תודה.

    אם תוכל, להגיב לי גם כאן: http://hwzone.co.il/community/threads/533670-%D7%A2%D7%99%D7%A6%D7%95%D7%91-%D7%AA%D7%A4%D7%A8%D7%99%D7%98-HTML-CSS?p=4792085#post4792085

    זה יעזור מאוד. תודה. (קיבלת "תודה").

  • ציטוט

    • ארכיון

    דיון זה הועבר לארכיון ולא ניתן להוסיף בו תגובות חדשות.

    עבור לרשימת הדיונים

    דיונים חדשים