Calque transparent

Fermé
CarolinaB - 16 juin 2011 à 16:10
 CarolinaB - 20 juin 2011 à 11:46
Bonjour,

Je débute un peu en html et css, et j'aurai besoin de vos lumières.

je souhaite mettre une photo dans le div body, mais pour que mon texte dans le container soit lisible, je souhaite mettre un calque derrière ledit texte et devant la photo, mais il faut que ce fond soit transparent pour laisser visible la photo d'arrière plan.

comment faire???

j'ai essayé opacity en variant de 0 à 1, ou encore ce code là en faisant varier les différents chiffres:

opacity:0.9;
-moz-opacity:0.1;
-ms-filter:"alpha(opacity=10)";
filter:alpha(opacity=10);


je n'obtiens que 2 types de résultats:
- soit ça ne change strictement rien et le texte reste illisible
- soit c'est le texte lui même qui se met en transparence

autres informations:
- la photo est dans #body
- le fond transparent doit se trouver en arrière plan de #container (qui contient #layout et #menuder)
- ce qui code le texte se trouve dans #layout et #menuder


Merci d'avance pour votre aide!!

Carolina

4 réponses

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 16:31
Avec un peu de code ça serai encore mieux.
0
euh ben si tu veux..

ça c'est dans mon php car je veux attribuer une image différente pour chaque page!

<style type="text/css">
body {
background-color:#000000;
background-image:url(2chat.jpg);
background-position:bottom;
background-repeat:no-repeat;}
</style>


ensuite dans mon css:

#container {
margin:0 auto;
width:80%;
margin-top:0px;
margin-bottom:100px;
background:#000000;
opacity:0.9;
-moz-opacity:0.1;
-ms-filter:"alpha(opacity=10)";
filter:alpha(opacity=10);}


voilà où j'en suis, j'essaie de tester pas mal de trucs, mais ça ne marche pas...
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 17:46
Euh... je pensais surtout au code html de la page en fait.
0
désolée, c'est encore du chinois pour moi!! ^^

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Comunicacion animal</title>
<?php include('meta.php'); ?>
<link href="flores.css" rel="stylesheet" />

<style type="text/css">
body {
background-color:#000000;
background-image:url(2chat.jpg);
background-position:bottom;
background-repeat:no-repeat;}
</style>
</head>

<body>
<div id="container">

<div id="layout">

<div id="text">
</div><!-- text -->

<div id="menuder">
</div><!-- menuder -->

</div><!-- layout -->
</div><!-- container -->

</body>
</html>
0
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
16 juin 2011 à 18:04
je souhaite mettre un calque derrière ledit texte et devant la photo

Où est ledit texte et la photo?
0
voilà ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Comunicacion animal</title>
<?php include('meta.php'); ?>
<link href="flores.css" rel="stylesheet" />
<style type="text/css">
body {
background-color:#000000;
background-image:url(2chat.jpg);
background-position:bottom;
background-repeat:no-repeat;}
</style>
</head>

<body>
<div id="container">

<div id="enlaces">
<p>Links de interés</p>
<ul>
<li class="2"><a href="http://www.sonowat.com/limpieza-ultrasonidos/limpieza-piezas.php" title="limpieza ultrasonidos">Servicio de limpieza de piezas por ultrasonidos</a></li> |
<li class="2"><a href="http://www.1globaltranslators.com/traducciones.php" title="traducciones">Traducciones</a></li> |
<li class="2"><a href="cadena.php">La cadena de transmisión de la información</a></li>
</ul>
</div>

<div id="cabecera">
<h1>Comunicación animal</h1>

<a href="index.php" title="flores">« Volver a inicio</a>
</div>
<div id="layout">
<div id="text">


<h2>Comunicación animal</h2>

<p>El mundo biológico está lleno de olores, sonidos, movimientos y señales eléctricas por el que los animales interactúan en diferentes contextos, tales como la atracción de la pareja, la competencia por los recursos, búsqueda de alimento, cualquier cosa... que participen dos personas, un transmisor y un receptor. El transmisor produce una señal de que es el soporte físico de la información. La señal provoca un cambio de comportamiento / estado fisiológico del receptor. El receptor a veces puede utilizar esta información para tomar decisiones que resultan en una respuesta conductual. respuesta del receptor puede afectar a la supervivencia del emisor, así como por su propia cuenta. Todo intercambio de información entre los dos animales no es comparable a una comunicación (por ejemplo, un ratón que hace ruido cuando se mueve no se comunica con la caza búho; ecolocalización que permite a un animal se mueva en el espacio o para localizar a sus presas a través del eco de sus propios sonidos no es una comunicación). Consideramos que no hay comunicación cuando este proceso es un beneficio en términos de supervivencia del individuo, grupo de especies. Nosotros restringimos aquí para la comunicación intraespecífica, la eliminación de situaciones de hecho más o menos polémico - y, a veces real - en una especie utiliza otra señal.</p>

<p>Comprender los fenómenos de la solicitud de la comunicación animal a considerar los pasos siguientes:</p>

<ul>
<li>descifrado el funcionamiento de la cadena de transmisión de información considerando la diversidad de las señales utilizadas</li>
<li>su método de producción por el animal transmisor</li>
<li>transmisión en el medio ambiente</li>
<li>recibida por el animal que recibe</li>
<li>análisis de las funciones biológicas de las comunicaciones</li>
<li>términos de codificación de la información</li>
<li>estudiar las implicaciones evolutivas de las comunicaciones</li>
</ul>

<strong>
<p class="2">Con dos cuestiones muy diferentes: ¿cómo están cambiando los procesos de comunicación (¿cómo participar en la respuesta adaptativa del organismo a su medio ambiente)? Y cómo las comunicaciones juegan un papel en la evolución de las especies? Por último, se plantea la cuestión de los intereses de comprensión de los mecanismos de la comunicación animal aplican la perspectiva, tanto en el ámbito de la protección de especies animales, como la lucha contra el malware. Al igual que todo el comportamiento animal, el estudio de la comunicación se puede abordar desde cuatro ángulos siguientes:</p>

<ol class="3">
<li>causas "inmediatas" el comportamiento (métodos de producción, transmisión y recepción de señales)</li>
<li>punto de vista ontogenético (la genética del comportamiento de la comunicación, la producción de señales de aprendizaje y su contexto de uso)</li>
<li>términos de funciones biológicas (funciones) de la comunicación</li>
<li>punto de vista evolutivo (doble perspectiva: el ajuste de las señales de comunicación a sus funciones y papel de la comunicación en el proceso de evolución de las especies).</li>
</ol>

<p class="3">El estudio del comportamiento animal se encuentra en la encrucijada de muchas disciplinas: la fisiología (incluyendo las neurociencias, pero también el estudio de todas las funciones vitales como la nutrición y la reproducción), ecología y evolución, por supuesto, pero también la anatomía, la genética ... Considerar la comunicación animal, debemos adoptar una perspectiva integradora y no dudan en cambiar de escala en la explicación de los fenómenos.</p>
</strong>


</div><!-- text -->

<div id="menuder">
<ul>
<li><a href="cadena.php">La cadena de transmisión de la información</a></li>
<li><a href="generacion.php">Generación de la señal</a></li>
<li><a href="transmision.php">La transmisión de señales en el medio ambiente</a></li>
<li><a href="recepcion.php">Recepcion de la señal</a></li>
<li><a href="interpretacion.php">Interpretación de la señal y decisión</a></li>
<li><a href="cadenaconclusion.php">La cadena de transmisión de la información - Conclusión</a></li>
<li><a href="funciones.php">Las funciones de comunicación</a></li>
<li><a href="codificacion.php">La codificación de la información</a></li>
<li><a href="informacion.php">La información codificada en señales de comunicación</a></li>
<li><a href="pareja.php">Elección de pareja y la selección sexual</a></li>
<li><a href="comunicacion.php">La comunicación entre padres y jóvenes</a></li>
<li><a href="competencia.php">La competencia territorial</a></li>
<li><a href="reconocimiento.php">Reconocimiento a los familiares y / o un grupo social</a></li>
<li><a href="reporte.php">El reporte de estatus social</a></li>
<li><a href="coordinacion.php">La coordinación social</a></li>
<li><a href="funcionesconclusion.php">Las funciones de comunicación - Conclusión</a></li>
<li><a href="evolucion.php">Comunicación y Evolución</a></li>
<li><a href="anatomicophysiological.php">Limitaciones Anatomicophysiological en la producción y recepción de señales</a></li>
<li><a href="coevolucion.php">"Co-evolución" del transmisor-receptor</a></li>
<li><a href="limitaciones.php">Limitaciones sociales y la evolución de la señal</a></li>
<li><a href="interaccion.php">La interacción entre padres y jóvenes y entre jóvenes</a></li>
<li><a href="correlacion.php">Correlación sistema de comunicación y sistema social</a></li>
<li><a href="receptores.php">Los receptores no deseados</a></li>
<li><a href="requisitos.php">Requisitos medioambientales y la adaptación de la comunicación</a></li>
<li><a href="comunicacion.php">La comunicación y la evolución de las especies</a></li>
<li><a href="comunicacionconclusion.php">Comunicación y Evolución - Conclusión</a></li>
<li><a href="animales.php">Animales de comunicación y aplicaciones</a></li>
<li><a href="biologia.php">Biología de la Conservación</a></li>
<li><a href="gestion.php">Gestión de Riesgos bióticos</a></li>
<li><a href="conclusion.php">Conclusión general</a></li>
</ul>
</div><!-- menuder -->

</div><!-- layout -->




<div id="footer">



</div><!-- footer -->

</div> <!-- container -->

</body>
</html>



je te mets aussi mon code css, dis moi si il faut modifier quelque chose là dedans aussi! merci!! ;)


@charset "UTF-8";
/* CSS Document */

#container {
margin:0 auto;
width:80%;
margin-top:0px;
background-color:#555;
opacity:.8;
filter:alpha(opacity=30);
-moz-opacity:.8;
z-index:1;}


#footer2 {
float:left;
width:100%;
text-align:center;
color:#FF6600;
font-family:"Comic Sans MS";
font-size:14px;
height:100px;}

#footer2 ul {
margin-top:0px;
margin-left:-40px;}

#footer2 ul li {
list-style:none;
display:inline;
color:#FF6600;}

#footer2 ul li a {
color:#FF6600;
text-decoration:none;
font-family:"Comic Sans MS";
font-size:14px;}

#footer2 ul li a:hover {
text-decoration:underline;
font-size:15px;}



#cabecera {
width:97%;
float:left;
padding-left:3%;
font-family:Edwardian Script ITC, Arial, sans-serif;
margin-top:0px;
margin-bottom:0px;}

#cabecera a {
text-decoration:overline;
color:#FA5221;
font-size:14px;
font-family:Arno Pro SmText;
font-size:24px;
margin-bottom:0px;}

#cabecera a:hover {
text-decoration:none;}

#cabecera h1 {
padding-top:30px;
margin-bottom:0px;
color:#FA5221;
border-style:ridge;
padding-bottom:20px;
margin-right:25px;
font-size:80px;
text-align:center;}


#layout {
width:100%;}


#text {
width:54%;
padding:3%;
text-align:justify;
color:#FFFFFF;
font-family:"Comic Sans MS";
font-size:14px;}

#text .t2 {
color:#666666;}

#text .t3 {
color:#660000;}

#text h2 {
margin-top:0px;
font-family:Helvetica, Arial, sans-serif;
color:#FFFFFF;}


#menuder {
float:left;
width:34%;
padding:3% 0 3% 3%;}

#menuder ul {
margin-top:35px;
padding-top:30px;
padding-bottom:35px;
padding-right:35px;}

#menuder ul li {
list-style:none;
margin-top:10px;
border:1p solid #660;
padding-left:20px;}

#menuder ul li a {
text-decoration:none;
color:#F00;
font-family:Helvetica, Arial, sans-serif;}

#menuder ul li a:hover {
padding-left:2px;}


#footer {
float:left;
width:100%;
text-align:center;
color:#F00;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;}

#footer ul {
margin-top:10px;}

#footer ul li {
list-style:none;
display:inline;}




#footer ul li a {
color:#F00;
text-decoration:none;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;}

#footer ul li a:hover{
text-decoration:underline;
font-size:15px;}



je pense que maintenant tu as tout!!! ^^ le truc c'est que suivant les différentes page, la taille du container change puisque la taille de mes textes change aussi...

j'ai testé de créer une image d'un pixel en format png pour la transparence et de le mettre en background du container en le faisant se répéter, mais ça non ça marche pas...

Merci d'avance pour l'aide!!!
0
personne ne peut vraiment pas m'aider?? parce que je n'y connais vraiment pas grand chose... et je galère!!! :s
0