Использование CSS для изображения в пределах границы

У меня есть некоторые CSS и HTML, над которыми я работаю, я хотел вывести содержимое, которое является блоком div для изображения, и сохранить границу с закругленными ребрами с ним , Но изображение не появляется, когда я просматриваю код. CSS и HTML связаны правильно. По общему признанию, это только я, занимаясь изучением CSS и HTML.Использование CSS для изображения в пределах границы

Если вы могли бы взглянуть на это и дать мне представление о том, как получить изображение, отображаемое в закругленной рамке, я был бы признателен.

РЕДАКТОР: Я боюсь, что я не совсем понял, в чем проблема. Изображение в теге заголовка и связанное с кодом «a.title» css не является проблемой, это просто изображение заголовка.

Проблема заключается в том, что я хочу, чтобы изображение отображалось в разделе div class = "content" HTML с источником изображения, исходящим из части CSS, которая является div.content.

Я довольно плохо объясняю свои вопросы/проблемы, извините. Но спасибо за всю вашу помощь до сих пор!

HTML:

<html> 
<head> 
    <title>Some Title</title> 
    <link href="/Volumes/lastname/sitename/css/style.css" rel="stylesheet" type="text/css" media="all"> 
</head> 

<body> 

    <div id="container">   

     <p class="title"><img src="/Volumes/last/sitename/media/header3.png"></img></p> 

     <div class="navbar"> 
      <a class="nav" href="http://www.facebook.com">Facebook</a> 
      <a class="nav" href="http://www.twitter.com">Twitter</a> 
     </div> 

     <div class="content"> 
     </div> 

    </div> 

</body> 

</html>

Вот CSS - я знаю его больше кода, чем вам нужно знать, но здесь каким-либо образом:

body { 
background: #ffffff 
width: 1000px; 
height: 800px; 
margin: 0 auto; 
font-family: "Arial"; 
} 

#container { 
width: 900px; 
height: 800px; 
margin: 0 auto; 
} 

div.content { 
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat; 
border-style: solid; 
border-width: 2px; 
width: 900px; 
height: 500px; 
margin-top: -20px; 
border-radius: 7px; 
border-color: #a0a0a0; 
} 

a.title { 
margin-top:120px; 
font-size: 36px;  
} 

div.navbar { 
margin-top: -62px; 
float: right; 
font-size: 18px; 
} 
a.nav { 
text-decoration: none; 
color: #717171; 
padding-right: 20px; 
} 
a.nav:hover { 
color: #1299d6; 
} 

div.text { 
margin-top: 100px; 
} 


p.text1 { 
display: block; 
text-align: center; 
} 


p.text2 { 
display: block; 
text-align: center; 
} 


p.text3 { 
display: block; 
text-align: center; 
} 


p.text4 { 
display: block; 
text-align: center; 
} 

div.links { 
margin-top: 50px; 
text-align: center; 
} 

a.links { 
text-decoration: none; 
color: #ffffff; 
padding-left: 10px; 
padding-top: 5px; 
padding-right: 10px; 
padding-bottom: 5px; 
border-radius: 10px; 
opacity: 0.6; 
} 

a.twitter { 
background: #42a300; 
} 

a.contact{ 
background: #1299d6; 
} 

a.subbutton{ 
background: #690260; 
} 

a.links:hover { 
opacity: 1.0; 
}

источник

2012-02-06 Mike Felder

Прежде всего тег изображения неправильно. Он должен быть

<img src="/Volumes/last/sitename/media/header3.png" />

http://jsfiddle.net/vBRBM/

Проверьте код.

источник

2012-02-07 00:12:09 borayeris

Я только что переключился на это, я увяз в CSS, чтобы связать изображение и не думал, что на самом деле есть изображение в HTML. Большое спасибо за Вашу помощь. –

Добро пожаловать, Майк. – borayeris

Вы должны взять изображение из ряда div и просто создайте правило для класса.

p.title { 
background-image: url('/Volumes/last/sitename/media/imagename.jpg') no-repeat  right top; 
border-style: solid; 
border-width: 2px; 
width: 900px; 
height: 500px; 
margin-top: -20px; 
border-radius: 7px; 
border-color: #a0a0a0; 
}

источник

2012-02-07 00:04:29 Billjk

Я подозреваю, что это может иметь отношение к URL-адресу. возможно, попробуйте нотацию ..? Это зависит от того, где изображение относится ко всем вашим другим файлам.

body 
{ 
background-image:url(' *CHANGE THIS* '); 
background-repeat:no-repeat; 
background-position:right top; 
border-style: solid; 
border-width: 2px; 
width: 900px; 
height: 500px; 
margin-top: -20px; 
border-radius: 7px; 
border-color: #a0a0a0; 
}

img теги не имеют ничего в них, поэтому они не нуждаются в отдельной закрывающий тег. Конец его в том же теге, добавив слеш на конце /> как

<img src="/Volumes/last/sitename/media/imagename.jpg" />

источник

2012-02-07 00:10:26

Использование CSS для изображения в пределах границы

ответ

Смежные вопросы