Могу ли я установить два фоновых изображения на одном элементе с CSS? -- html поле с участием css пол Связанный проблема

Can I set two background images on the same element with CSS?


9
vote

проблема

русский

Образец HTML-кода:

 <код> belongs_to :y3  

Пример файла CSS:

 <код> belongs_to :y4  

Кажется, что часть «B» игнорируется.

Есть ли способ Inlclude как изображения в той же клетке, даже используя другую технику?

Английский оригинал

Sample HTML code:

<table> <tr>  <td class="a b"> 

Sample CSS file:

.a {   background-image:url(a.png); }  .b {   background-image:url(b.png); } 

It seems like the "b" part is ignored.

Is there any way to inlclude both images in the same cell, even using other technique?

</div
     
 
 

Список ответов

7
 
vote
vote
Лучший ответ
 

Вы можете сделать это:

 <код> <td class="a"><div class="b">...</div></td>   

Тогда <код> td будет иметь первый фон, а <код> div внутри у него будет второй. Если кто-то прозрачен, другой покажет. Я думаю, <код> b.png будет сверху, но я не уверен в этом.

 

You could do this:

<td class="a"><div class="b">...</div></td> 

Then the td will have the first background, and the div inside it will have the second. If one is transparent, the other will show through. I think b.png will be on top, but I'm not sure about that.

</div
 
 
 
 
15
 
vote

Теперь вы можете сделать с CSS3. http://www.zenelement.com/blog/css3-background-images/

 <код> #my_CSS3_id { background: url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; }   
 

Now you can do with CSS3. http://www.zenelements.com/blog/css3-background-images/

#my_CSS3_id { background: url(image_1.extention) top left no-repeat, url(image_2.extention) bottom left no-repeat, url(image_3.extention) bottom right no-repeat; } 
</div
 
 
1
 
vote

Нет, каждая декларация фонового изображения заменит / переопределяет предыдущий для данного элемента. Вам нужно будет располагать элемент на каждый дополнительный фон, который вы хотите подать заявку. Если вы пытаетесь применить модульную границу на элемент, существуют новые свойства границ в CSS3, но они не являются широко поддерживаются.

 

No, every declaration of background-image will replace/ override the previous one for a given element. You'll need to nest an element for every additional background you want to apply. If you're trying to apply a fancy border to an element, there are some new border properties in CSS3, but they're not widely supported.

</div
 
 
1
 
vote

Что-то вроде этого может работать:

 <код> <table> <tr>   <td class="a">     <div class="b">   

и CSS:

 <код> .a {   background: url(a.png) top left no-repeat; }  .b {   background: url(b.png) top right no-repeat; }   

Установите достаточно широко, и вы увидите одно изображение, плавающее в левом верхнем углу, а другой в правом верхнем углу

 

something like this could work:

<table> <tr>   <td class="a">     <div class="b"> 

and the css:

.a {   background: url(a.png) top left no-repeat; }  .b {   background: url(b.png) top right no-repeat; } 

set the div wide enough and you'll see one image floating in the top left and the other in the top right

</div
 
 
1
 
vote

Это интригующая идея, но подумайте о том, как работают другие свойства, такие как цвет.

 <код> .a { color: red; } .b { color: blue; }   

Как этот текст может быть как красным и blue ? В этом случае синий выигрывает Tiefreaker, потому что он указан позже.

Там может быть другой способ, если вы можете создать изображение AB.PNG, который является результатом объединения A.PNG и B.PNG.

 <код> .a { background-image(a.png) } .b { background-image(b.png) } .a.b { background-image(ab.png) }   

Предостережение: это не работает в IE6.

 

It's an intriguing idea, but think about how other properties work, such as color.

.a { color: red; } .b { color: blue; } 

How could the text be both red and blue? In this case, blue wins the tiebreaker, because it's specified later.

There may be another way, if you can create an image ab.png that is the result of combining of a.png and b.png.

.a { background-image(a.png) } .b { background-image(b.png) } .a.b { background-image(ab.png) } 

Caveat: It doesn't work in IE6.

</div
 
 
 
 
0
 
vote

Вы не можете иметь как изображения в качестве изображения BG для ячейки. Вам нужно сделать 2 ячейку или поместить изображения как <код> <img ... /> теги внутри клетки. Также некоторые зарывы ​​имеют проблемы с чтением класса = «A B C» определения класса.

 

You can't have both images as a bg image for a cell. You need to make 2 cell or put the images as <img ... /> tags inside the cell. Also some browers have issues reading class="a b c" class definitions.

</div
 
 
     
     

Связанный проблема

0  .append () элемент с более чем одним классом  ( Append element with more than one class ) 
Я не могу найти информацию о том, можно ли использовать .append (), чтобы добавить элемент в HTML и дать этому элементу более одного класса <код> $( ".nav"...

0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC?  ( How to close popup when youtube video is playing on esc button button ) 
Нажмите меня, чтобы увидеть демонстрацию Когда видео не играет, то кнопка ESC нажала всплывающее окно, но он не работает при воспроизведении видео. ...

3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS)  ( Is there any way to distinguish touch vs mouse interactions in windows 8 html ) 
Я в настоящее время строю приложение, которое имеет много внимания на панорамирование, которое выглядит и чувствует себя красиво, когда касается и манипулируе...

-2  Как вы можете центрировать галерею с HTML и CSS  ( How can you center a gallery with html and css ) 
Я выхожу новый HTML и CSS и надеюсь, что кто-то может помочь. с помощью W3 Schools ( http://www.w3schools.com/css/css_image_gallery. ASP ) Я создал простую ...

0  Как я могу отобразить вывод каждого цикла на петле «для»?  ( How can i display the output of each loop on a for loop ) 
Я общий новичок, и я работаю над «простыми числами» рисованием / анимацией с помощью HTML5 Canvas и JS. Мне трудно с помощью петли «Для», потому что браузер о...

0  Как сделать левую и правую границу карты в ионном прозрачном  ( How to make the left and right border of a card in ionic transparent ) 
Ниже приведен мой HTML. У меня в общей сложности 3 карты в трех столбцах и хотите только левую и правую сторону быть прозрачными. Я пробовал устанавливать гра...

15  CSS округлые углы  ( Css rounded corners ) 
Я видел много кодов для этого, но кажется, что он не работает очень хорошо или вообще. Я использовал картинки для округлых углов, но мне нужен код, так что он...

1  Как я могу сделать пользовательский сортировку на следующем HTML-таблице, заставляя некоторые ряды всегда кажутся под другими?  ( How can i do a custom sort on the following html table forcing some rows to alw ) 
У меня есть следующие данные для списка задач: У меня есть <код> HTML Таблица, отображаемая эти данные, в настоящее время отсортировано по имени задачи ...

0  Как вы используете PHP и SQL для отправки данных таблицы на другую таблицу  ( How do you use php and sql to submit table data to another table ) 
У меня есть таблица полетов, и я использую цикл, чтобы распечатать информацию о рейсах, наряду с кнопкой отправки, кнопка, которая нажала, - это представленны...

2  SMTPClient отправляет RAW HTML  ( Smtpclient sending raw html ) 
Может ли кто-нибудь сказать мне, почему следующий код отправляет электронные письма в Raw HTML? Как в, электронная почта выглядит когда вы просматриваете исто...

4  Как генерировать документ Word (DOC, DOCX) в ASP.NET? [закрыто]  ( How to generate word documentdoc docx in asp net ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт . Этот вопрос должен быть больше Фокусированный . В настоя...

0  Скачать изображение из результатов API  ( Download image from api results ) 
Я создаю приложение, которое использует онлайн API для рерантива изображений на основе ключевого слова для поиска. Я запускаю петлю Foreach для рендеринга 12 ...

0  всплывающее окно не назначает центр экрана  ( Popup not assign the center of the screen ) 
У меня есть код ниже, чтобы назначить всплывающую точный центр экрана. Но это не работает. Всплывающее окно появляется в разных местах, основанных на размере ...

1  JavaScript не работает над динамическим контентом  ( Javascript not working on dynamic content ) 
У меня есть страница, где в HTML Div загружен с другой страницы. На родительской странице у меня есть JavaScript, который имеет элементы, которые применяются ...

1  Как проверить отметку Check Column в сетке?  ( How to check mark a check column in a grid ) 
У меня есть флажок Check Column на сетке, которая мне нужна для программически проверки. Вот как сценарий Check Column: <код> columns: { items:[ ...

Связанный проблема

0  .append () элемент с более чем одним классом 
0  Как закрыть всплывающее окно, когда видео YouTube играет на кнопке кнопки ESC? 
3  Есть ли способ различить связь против мышиных взаимодействий в Windows 8 (HTML / JS) 
-2  Как вы можете центрировать галерею с HTML и CSS 
0  Как я могу отобразить вывод каждого цикла на петле «для»? 
0  Как сделать левую и правую границу карты в ионном прозрачном 
15  CSS округлые углы 
1  Как я могу сделать пользовательский сортировку на следующем HTML-таблице, заставляя некоторые ряды всегда кажутся под другими? 
0  Как вы используете PHP и SQL для отправки данных таблицы на другую таблицу 
2  SMTPClient отправляет RAW HTML 
4  Как генерировать документ Word (DOC, DOCX) в ASP.NET? [закрыто] 
0  Скачать изображение из результатов API 
0  всплывающее окно не назначает центр экрана 
1  JavaScript не работает над динамическим контентом 
1  Как проверить отметку Check Column в сетке? 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.