Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Наложение текста на изображение

Добрый день. Помогите пожалуйста сделать так чтобы текст(div id="Text">Текст Текст</div>) накладывался на картинку. Перепробовал различные варианты, текст накладывался но сдвигалось и само изображение.

HTML5
1
2
3
4
5
6
7
8
<table id="imgtable" style="z-index: 55; position: fixed;">
    <tr>
           <td style="text-align: center;">
                       <img src="test.img" id="image" style="position: relative; border: 2px solid #fff; border-radius: 3px;" />
                       <div id="Text" style="margin-bottom:30px">Текст Текст</div>
            </td>
    </tr>
</table>
Так же , важно чтобы стиль таблицы оставался с position: fixed;
Ответ:
Сообщение от astartes
Сделайте изображение бэкграундом и текст сам ляжет)
Тогда ТД придётся размеры давать.


текст поставить куда нужно
HTML5
1
2
3
4
<div style=" position:relative;">
<img src="pics/ie48.gif" id="image" style="border: 2px solid #fff; border-radius: 3px;" />
<div id="Text" style=" position:absolute; left:11px; top:11px;">Текст</div>
</div>
Вопрос: Резиновый блок (текст + картинка)

Здравствуйте! У меня есть блок с текстом и картинкой. Нужно, чтобы при уменьшении экрана картинка и блок с текстом уменьшались. У меня пока вот так
HTML5
1
2
3
4
5
6
7
8
9
10
...
<div class=main-conteiner>
<div class="second">
<div class="text-second"> <h2>Описание</h2>
<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>
</div>
<div class="image-second"><img src="img/22.jpg"></div>
</div>
</div>
...
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.main-conteiner {
    background: #ffffff;
    max-width: 1200px;
}
.second {
    width: 100%;
}
img {
    max-width: 100%;
}
.image-second {
    display: inline-block;
    display: -webkit-inline-box;
}
.text-second {
    padding: 45px 25px;
    max-width: 595px;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    vertical-align: top;
}
при изменении размера текст слетает под картинку
Ответ: Набросал Вам, все резиновое, и отступы и картинка:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
</head>
<style>
    *{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        line-height: 1;
    }
    
    .center{
        max-width: 1280px;
        margin: 0 auto;
    }
    
    .img_item{
        float: left;
        width: 25%;
    }
    
    .p_item{
        font: 16px/24px Arial;
        color: #212121;
        margin: 0 0 1% 25%;
        padding-left: 2%;
    }
    
</style>
<body>
   <div class="center">
       <img class="img_item" src="http://www.placehold.it/320x240" alt="">
       <p class="p_item">Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Продолжил которое, переписывается прямо залетают имени семь наш ты там единственное текста семантика, если возвращайся лучше составитель, запятой коварных текстов.</p>
       <p class="p_item">Агенство пояс взобравшись единственное речью ему использовало? Мир на берегу рекламных путь, выйти которое! Необходимыми, lorem последний, повстречался переписали жизни однажды все предупреждал решила путь продолжил! Образ обеспечивает переулка путь они.</p>
       <p class="p_item">Всеми вскоре переулка меня ему продолжил, языком даже проектах коварный единственное lorem, предупредила, взобравшись снова о необходимыми курсивных они. Продолжил имеет семантика знаках жаренные всеми ведущими инициал ее, встретил его?</p>
   </div>
    
</body>
</html>
Вопрос: Наложение текста на картинку

Здравствуйте. Имеется картинка (во вложении). нужно поместить текст в РАМКУ, которую держит дракон, при этом рамка должна раздвигаться в зависимости от размера текста. Как это сделать с помощьюJavaScript и CSS?  Нужно, как на этом сайте 
У меня получилось наложить текст поверх картинки, но это не то. 
Спасибо

Это сообщение отредактировал(а) Chate - 30.9.2016, 15:29

Присоединённый файл ( Кол-во скачиваний: 2 )
 
Ответ:
можешь сделать через дистрибутив подзаголовков параметнов данных в CSS с подключением jQuery библиотеки. Там через основные их модули если прокомпилировать нормально должно получиться
Вопрос: Наложение текста на прозрачный фон

Есть блок, в этом блоке нижний слой - это одноцветный фон, поверх него идёт прозрачная картинка, для которой этот одноцветный фон используется. Поверх прозрачной картинки нужно разместить заголовок h1. Так вот, когда я размещаю этот заголовок - в качестве фона заголовка выступает самый нижний одноцветный фон... Как сделать так, чтобы для заголовка не было этого фона и он был поверх прозрачного фона?

Вот код :
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>burger.co</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <header>
                <div class="logo">
                    <a href="#" alt="logo"><img src="images/logo.png" alt="logo"></a>
                </div>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Our Burgers</a></li>
                        <li><a href="#">What Else?</a></li>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <section>
                <div class="slogans">
                    <article class="left">
 
                    </article>
                    <article class="right">
                                              <h1>Some Header</h1>
                    </article>
                </div>
            </section>
        </div>
    </body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
@import url(reset.css);
@import url([url]https://fonts.googleapis.com/css?family=Rubik:400,500,700);[/url]
 
#wrapper {
    max-width: 1022px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
header {
    width: 100%;
    height: 125px;
    background: #fff;
}
 
.logo {
    width: 168px;
    height: 21px;
    float: left;
    margin: 45px 215px 55px 55px;
}
 
nav {
    width: 401px;
    height: 30px;
    float: right;
    margin-top: 45px;
    margin-right: 180px;
}
 
nav ul li {
    display: inline;
}
 
nav ul li a{
    margin-right: 12px;
    text-decoration: none;
    font-family: "Times New Roman", Arial, sans-serif;
    color: #c6c8c9;
    font-size: 18px;
}
 
nav ul li a:hover {
    color: #0e1d2b;
    border-bottom: 3px solid #ffa326;
}
 
.slogans {
    width: 100%;
    height: 390px;
}
 
.left {
    width: 50%;
    height: 100%;
    background: #011627;
    float: left;
    overflow: hidden;
}
 
.left:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background: url(../images/wcb_opacity.png) no-repeat;
  opacity: 0.8;
}
 
.right {
    width: 50%;
    height: 100%;
    background: #ff9f1c;
    float: right;
    overflow: hidden;
}
 
.right:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: url(../images/delicious_op.png) no-repeat;
    opacity: 0.8;
}
 
.right>h1 {
    margin-top:50px;
}
Вот что получается, на скрине. margin-top для h1 задан для наглядностии:
Ответ: В общем, как всегда поспешл с вопросами
Проблему решил установкой для article.right атрибут position: relative, а для h1 - position:absolute.

Добавлено через 1 минуту
Shakalaka, спасибо большое за хорошую идею, буду пользоваться!
Вопрос: Отображение картинок при добавлении свойства overflow

Доброго времени суток!
Прошу помочь с понимаем сути проблемы (я новичок в HTML)
Обязательное условие поставленной передо мною задачи - текст и изображения должны быть в отдельной рамке (в css у меня называются menu и menuu)
Суть в следующем: в рамке указаны спойлеры, при открытии которых появляется текст и картинки, при клике на картинку - она увеличивается и передвигается (при открытии моего кода рамка "Пример1"). В ходе реализации решили ограничить высоту рамки и добавить скролл для удобства (при открытии моего кода рамка "Пример2").
Так вот если в Примере1 картинка при увеличении и движении спокойно перекрывает собой границы своей рамки и выходит за них на первый план, то при добавлении свойства overflow для рамки, чтобы отображался скрол (Пример2), картинка на передний план не "выезжает".
Пробовал указывать z-index для рамки "3", а для картинки "5", но результат тот же (или я неверно указывал свойство z-index)

Прошу подсказать, есть ли решение данной проблемы, чтобы картинка в Примере2 при клике корректно срабатывала, как в Примере1 или это невозможно в рамках той "конструкции" что сейчас имеется (текст/картинки в рамках).

Заранее спасибо!

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
.menu {
position:fixed;
text-align:centr;
right:2.1%;
top:60%;
background:#ffe;
padding:1%;
border:1px solid #333;
width:20%;
height:300px;
overflow:auto;
}
 
.menuu {
position:fixed;
text-align:centr;
right:50%;
top:60%;
background:#ffe;
padding:1%;
border:1px solid #333;
width:20%;
}
 
.input-button{
width: 100%; 
text-align: center;
background-color: #FF6A12;
border-radius:10px;
margin:10px 5px 15px 20px; 
border:1px solid #ccc;
font-weight: bolder;
color:#fff; 
margin:0 auto;
padding:5%;
}
 
.spoil {
}
 
.smallfont {
}
 
.alt2 {
text-align: left;
}
 
.popup{
margin: 0 auto;
display: block;
transition: 0.4s;
 
}
 
.popup:focus {
width: 170%;
-ms-transform: scale(1.1, 1.2) translate(-100%, -40%);
-webkit-transform: scale(1.1, 1.2) translate(-100%, -40%);
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<div class="menu"> 
<div class="spoil"> 
<div class="smallfont">
<input class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ''; }" type="button" value="Спойлер"/> 
</div> 
<div class="alt2"> 
Пример 2
<div style="display: none "> 
 
<p> 
<img width="50%" tabindex="1" class="popup" src=http://cs8.pikabu.ru/post_img/2016/11/30/5/148049081027338400.jpg alt=""/>
</p>
текст текст текст текст <br>текст текст текст текст <br>текст текст текст текст 
<br>текст текст текст <br>текст текст <br>текст текст текст <br>текст текст текст тексттекст 
<br>текст текст <br>текст текст текст текст <br>текст текст текст текст тексттекст текст текст 
<br>текст текст текст <br>текст текст текст текст <br>текст тексттекст 
<br>текст текст текст текст <br>текст текст текст текст текст текст текст   
</div>
</div> 
</div> 
 
</div>
 
<div class="menuu"> 
<div class="spoil"> 
<div class="smallfont">
<input class="input-button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Свернуть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Спойлер'; }" type="button" value="Спойлер"/> 
</div> 
<div class="alt2"> 
Пример 1
<div style="display: none "> 
 
<p> 
<img width="50%" tabindex="1" class="popup" src=http://cs8.pikabu.ru/post_img/2016/11/30/5/148049081027338400.jpg alt=""/>
</p> 
текст текст текст текст <br>текст текст текст текст <br>текст текст текст текст 
<br>текст текст текст <br>текст текст <br>текст текст текст <br>текст текст текст тексттекст 
<br>текст текст <br>текст текст текст текст <br>текст текст текст текст тексттекст текст текст 
<br>текст текст текст <br>текст текст текст текст <br>текст тексттекст 
<br>текст текст текст текст <br>текст текст текст текст текст текст текст
</div>
</div> 
</div> 
 
</div>
Ответ: kolyaplankton, в сss, насколько я знаю, такого нет. Тут надо думать как при помощи js выкрутиться.
Можно попытаться при клике по картинке задавать ей стиль position:fixed или высчитывать координаты изображения и делать его копию за пределами overflow, а исходное изображение скрывать. Можно поискать, есть ли плагин, который делает свою прокрутку без использования overflow.
Вопрос: Текст на анимационной картинке

Всем здравствуйте! Темы подобные были, но не было именно того что я ищу.
код такой:
HTML5
1
2
3
    <div class="test">
    <div class="box"><a href="#"><img width="250" height="250" src="img/div21.jpg" /><h1>Текст текст</h1></a></div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.test {
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
 
.box {
overflow:hidden;
width: 250px;
height:250px;
}
 
.box img {
transition: all 1s ease-out;
}
 
.box img:hover{
transform: scale(1.5);
}
В чём проблема:
1.нужно чтобы текст был на фото
2. чтобы при наведении на текст, картинка не прыгала. Чтобы фото приблизилось а текст был не изменен, но при наведении на текст, картинка не возвращалась на изначальный размер. Примера к сожалению не нашел.

Может ктото предложить своё решение данной проблемы!

Буду благодарен за помощь и решение проблемы!
Ответ: Веб-Десигнер, span и z-index нужны для позиционирования текста и только.
При наведении на текст hover-фокус переходит на текст и эффект transform считается завершенным, поскольку картинка hover-фокуса больше не имеет. Проблема решается псевдоклассом :not, который присваивается картинке следующим образом: span:hover + img:not(:hover) {правило}, т.е. правило работает когда span имеет hover-фокус, а img его не имеет.
При этом span должен быть идти до img, иначе данная конструкция работать не будет. Но в таком случае проблема будет решаться таким образом: .box:hover img:not(:hover) {правило}. И, пока писал, подумал, что скорее всего так даже предпочтительней будет) Но принципиальной разницы нет.
Выше вам написали, что h1 заключать в a, нельзя.
Вопрос: Wordpress настройка обтекания текста картинки


Картинки отцентрированы , а текст все равно справа есть. Не пойму в чем дело, подскажите уважаемые.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/**
|------------------------
| =Images
|------------------------
*/
 
p img {}
 
.entry-content img,
.author-content img,
.comment-content img,
.widget img {
    max-width: 100% !important;
    height: auto !important;
}
 
.entry-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
 
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {
    height: auto;
}
 
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
img.attachment-auto,
img.attachment-full,
img.attachment-large,
img.attachment-medium {
    max-width: 100%;
    height: auto;
}
 
img.alignleft {
    display: inline;
    float: left;
    margin: 20px 20px 20px 0;
}
 
img.alignright {
    display: inline;
    float: right;
    margin: 20px 0 20px 20px;
}
 
img.aligncenter,
img.centered {
    display: inline-block;
/**
|------------------------
|       margin: 20px 20px 20px 20px;
|------------------------
*/       
        clear: both;
 
}
 
img.alignnone {
    display: inline;
    margin: 20px 0;
}
Ответ: можно выбрать таким способом
CSS
1
2
3
4
.wp-image-997 {
  display: block;
  margin: 0 auto;
}
но лучше присвоить класс, или выбрать тег img используя родительский класс(допустим div class="photo") - .photo img {} так будут применятся правила для всех img в контейнере photo
Вопрос: Всплывающая картинка при наведении на текст

Как реализовать всплывающую картинку при наведении на текст? Т.е. при нажатии на текст картинка "выплывает", ещё раз блок с картинкой уходит
Ответ: Ну, с формой вы хоть код выкладывали, было даже похоже, что он ваш... Я смотрю, вы весь рунет хотите заставить вашу зарплату отрабатывать, да? На сайберфоруме ВайтМайнда до спазмов довели с этой формой, здесь ищете тех, кто вам прописные истины разжует... И все это вместо того, чтобы почаще в Консоль заглядывать на предмет ошибок и в учебник на предмет знаний.
Вопрос: Затмение картинки и появление текста при наведении курсора

как сделать, чтобы при наведении на картинку появляется текст, картинка становилась темнее, а при наведении на текст он менял цвет, затмение картинки оставалось тем самым
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>
    <img src="1 Please Please Me/The_Beatles_-_Please_Please_Me.jpg"/>
        <ol>    
        <h1>Список композицій</h1>
        <li>I Saw Her Standing There</li>
        <li>Misery</li>
        <li>Anna</li>
        <li>Chains</li>
        <li>Boys</li>
        <li>Ask Me Why</li>
        <li>Please Please Me</li>
        <li>Love Me Do</li>
        <li>P.S. I Love You</li>
        <li>Baby It's You</li>
        <li>Do You Want to Know a Secret</li>
        <li>A Taste of Honey</li>
        <li>There's a Place</li>
        <li>Twist And Shout</li>
        </ol>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
  
img
{
    height:480px;
    width:480px;
    border: solid #000;
    display: block;
    margin: 0; 
    margin-left:271.5px;
    margin-right:271.5px;
    opacity:1;
      -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
img:hover
{
 
  filter: grayscale(60%);
  /*filter: blur(1px);*/
  border-color:#ff0072;
}
 
 
ol
{
    position: absolute; 
    top: 0%;
    left: 30%;
    width: 480px;
    height:480px;
    opacity:0;
     transition: all 1s ease;
}
ol:hover
{
    opacity:1;
}
li
{
    font-size:16px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
}
 
 
li:hover
{
    color:#ff0072;
    font-weight:normal;
    cursor:pointer;
    opacity:1;
}
 
li:active
{
    font-size:15px;
}
Ответ:
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
.album {
  display: inline-block;
  position: relative;
  height: 300px;
  width: 300px;
}
 
.poster {
  position: relative;
  height: 100%;
}
 
.poster img {
  width: 100%;
}
 
.songs {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
  cursor: pointer;
}
 
.songs-title {
  color: #fff;
  text-align: center;
}
 
.songs-list {
  color: #fff;
}
 
.album:hover .songs {
  opacity: 1;
}
 
.album:hover .poster:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
}
 
.songs-list li:hover {
  color: red;
}
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="album">
  <div class="poster">
    <img src=".png" alt="" />
  </div>
  <div class="songs">
    <h2 class="songs-title">Title</h2>
    <ol class="songs-list">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
    </ol>
  </div>
</div>
Вопрос: НЕ добавляется картинка товара Virtuemart

Импортировал БД с товарами, и скопировал картинки товаров в: /components/com_virtuemart/shop_image/product,
но при редактировании товава без картинки, в закладке "Изображение товара" выбираю нужное изображение - Сохранить, после чего выводится Уведосление без текста, картинка НЕ ДОБАВЛЯЕТСЯ НА СТРАНИЦУ САЙТА и в папку не загружаются
/home/mojahata/public_html/components/com_virtuemart/shop_image/product :: Доступен для записи
/home/mojahata/public_html/components/com_virtuemart/shop_image/product/resized :: Доступен для записи

когда на изображении редактируемого товара проверяю путь к изображению - выдает нормальное: сайт/components/com_virtuemart/shop_image/product/b0dc0f376c6a51144b4e664babcaed2f.jpg

при редактировании информация о товаре обновляется, проблема только в картинке. и путь и имя присваивается верное картинке на странице товара, а вот грузится - не грузится!
Ответ: