Цветное перекрытие в CSS

-2

<table border="1" class="sample"> 

<tr> 
<th>Employee</th> 
<th>Salary</th> 
<th></th> 
</tr> 

<tr> 
<td>EMP1</td> 
<td>10000</td> 
<td><input id="btn1" type="button" value="Submit"> 
</tr> 

<tr> 
<td>EMP2</td> 
<td>12000</td> 
<td><input id="btn2" type="button" value="Submit"></td> 
</tr> 
</table>

Я установил чередующийся цвет в css. Это первый ряд, белый, а второй - желтый. Проблема заключается в том, что кнопка во второй строке также получает желтый цвет. Я установил Opacity в 0.5, чтобы он выглядел серым на pageload. Как удалить это перекрытие цвета?Цветное перекрытие в CSS

<style type="text/css"> 
table.sample { 
    border: 6px inset #8B8378; 
    -moz-border-radius: 6px; 
} 
table.sample td { 
    border: 1px solid black; 
    padding: 0.2em 2ex 0.2em 2ex; 
    color: black; 
} 
table.sample tr.d0 td { 
    background-color: #FCF6CF; 
} 
table.sample tr.d1 td { 
    background-color: #FEFEF2; 
} 
</style>

источник

2013-05-23 Pearl

Не могли бы вы предоставить свой CSS и подробно рассказать о том, почему вы вначале дали непрозрачность вашей кнопки? –

«Я установил непрозрачность этой кнопки на 0,5. Как удалить это перекрытие цвета?» Легко ... удалить непрозрачность! Непрозрачность менее 1 делает элемент частично прозрачным. Что еще вы ожидаете? Возможно, вам нужно просто выбрать подходящий цвет. –

Спасибо, Ральф! для быстрого ответа. Но я хочу Opacity, но все же хочу удалить цвет. Это возможно? – Pearl

Попробуйте вместо этого:

input {color: rgba(0,0,0,0.5);}

Э.Г. http://codepen.io/pageaffairs/pen/gGIiw

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

table { 
    border: 6px inset #8B8378; 
    -moz-border-radius: 6px; 
} 
table td { 
    border: 1px solid black; 
    padding: 0.2em 2ex 0.2em 2ex; 
    color: black; 
} 
table tr td { 
    background-color: #FCF6CF; 
} 
table tr td { 
    background-color: #FEFEF2; 
} 

input {color: rgba(0,0,0,0.5);} 

</style> 

</head> 
<body> 

<table border="1" class="simple"> 

<tr> 
<th>Employee</th> 
<th>Salary</th> 
<th></th> 
</tr> 

<tr> 
<td>EMP1</td> 
<td>10000</td> 
<td><input id="btn1" type="button" value="Submit"> 
</tr> 

<tr> 
<td>EMP2</td> 
<td>12000</td> 
<td><input id="btn2" type="button" value="Submit"></td> 
</tr> 
</table> 

</body> 
</html>

источник

2013-05-23 11:01:21

Извините, все еще получаю эффект от просмотра. – Pearl

Вы не увидите, что я разместил. Измените цвет bg на черный как тест. Не забудьте удалить непрозрачность. –

opacity делает ваш элемент сквозным. Непрозрачность 0.5 сделает элемент видимым на 50%.

Причина, по которой вы можете видеть свой цвет фона через ваш input, состоит в том, что ваш вход имеет эту непрозрачность. Вы в основном спрашиваете: «Я добавил окно в свой дом, но я вижу это, как я могу это предотвратить?», И ответ просто: удалите непрозрачность.

Вот демон JSFiddle, показывающее 0,0 непрозрачность, 0,5 непрозрачность и отсутствие непрозрачности в действии: http://jsfiddle.net/JamesD/UQ48z/1.

Example

Если вы хотите, чтобы ваша кнопка иметь различный цветной фон, в то время сохраняя свою прозрачность, что вы можете сделать, это обернуть его в span, а затем дать этот промежуток фон:

<td> 
    <span> 
     <input id="btn2" type="button" value="Submit"> 
    </span> 
</td>

td span { background:#fff; } /* New button background colour */ 
td span input { margin:0; } /* Remove the button's margins */

JSFiddle example.

источник

2013-05-23 10:58:23

Спасибо, есть ли другой способ достичь этого без использования непрозрачности? Я имел в виду, что я хочу, чтобы эффект серого (например, отключен) для кнопки эквивалентен 0,5 непрозрачности? – Pearl

Вы можете дать этой конкретной ячейке белый фон, но это выглядит немного странно. 'table.sample tr td: nth-child (3) {background: #fff; } '. –

@User Я добавил новый пример, используя 'span'. Это должно решить вашу проблему. –

Цветное перекрытие в CSS

ответ

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