Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Harleen
 
Fatalisss
 
JulioPais
 
Holkis
 
Shek
 
Luiz
 
APOllO
 
Forumpw
 
MtX
 

Quem está conectado
242 usuários online :: 9 usuários cadastrados, 1 Invisível e 232 Visitantes :: 2 Motores de busca

'Dante, Flames, Forumpw, Froozen, GPSouza, Harleen, joram, Luiz, soldado

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Colocar um background em rgba na página inicial

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Colocar um background em rgba na página inicial

Mensagem por PESS_dodo em 25/04/17, 08:39 pm

Detalhes da questão


Endereço do fórum: http://adliferpg.forumeiros.com
Versão do fórum: ModernBB

Descrição


http://adliferpg.forumeiros.com

Atras dos textos Advanced etc, bem vindo eu coloquei uma imagem transparante no background
Queria por em css esse fundo no texto

"BEM-VINDO(A)
AO ADVANCED LIFE RPG - OFICIAL™

IP.ADVANCEDLIFERPG.COM:7777"

Nesse texto

Quando tiver pronto, eu troco o background pra ver como fico

Codigo que voce mando por ultimo

http://ajuda.forumeiros.com/t108826-pagina-inicial-personalizada


Última edição por PESS_dodo em 25/04/17, 09:50 pm, editado 2 vez(es)
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum
  • 0

Resolvido Re: Colocar um background em rgba na página inicial

Mensagem por Luiz em 25/04/17, 08:42 pm

Olá,

Não entendi muito bem o que o senhor deseja.
Poderia ser um pouco mais específico?

Em adição, aviso desde já que iremos precisar do código HTML de sua página.

o/
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3517
Pontos Ativos : 4212

https://github.com/lffg/

Resolvido Re: Colocar um background em rgba na página inicial

Mensagem por PESS_dodo em 25/04/17, 08:45 pm

Quero por aquele fundo meio preto só que transparente nesse texto que te mandei
http://ajuda.forumeiros.com/t108826-pagina-inicial-personalizada
Ultimo código que voce mando ta aqui,

Eu tive que colocar uma imagem no background pra poder melhor visualizar o texto, queria por em CSS
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Colocar um background em rgba na página inicial

Mensagem por Luiz em 25/04/17, 08:50 pm

Troque o código por:
Código:
<html lang="en" class="no-js"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced Life RPG - OFICIAL™</title>
    <meta name="description" content="Advanced Life RPG - OFICIAL™">
    <meta name="keywords" content="SA:MP - DM">
    <meta name="author" content="Codrops">
    <link rel="shortcut icon" href="http://i.imgur.com/b03KyMn.png">
              <link rel="stylesheet" href="http://asusgames.esy.es/MyCSS.css" type="text/css" media="screen">
    <script src="http://asusgames.esy.es/CSS/modernizr.custom.js"></script>
 <style>
 /* General styles for all menus */
.cbp-spmenu {
 background: #104e8b;
 position: fixed;
}

.cbp-spmenu h3 {
 color: #afdefa;
 font-size: 1.9em;
 padding: 20px;
 margin: 0;
 font-weight: 300;
 background: #0d77b6;
}

.cbp-spmenu a {
 display: block;
 color: #fff;
 font-size: 1.1em;
 font-weight: 300;
}

.cbp-spmenu a:hover {
 background: #104e8b;
}

.cbp-spmenu a:active {
 background: #afdefa;
 color: #104e8b;
}

/* Orientation-dependent styles for the content of the menu */

.cbp-spmenu-vertical {
 width: 240px;
 height: 100%;
 top: 0;
 z-index: 1000;
}

.cbp-spmenu-vertical a {
 border-bottom: 1px solid #1c5f85;
 padding: 1em;
  -webkit-transition:background 0.5s ease-out;
    -moz-transition:background 0.5s ease-out;
    -o-transition:background 0.5s ease-out;
    -ms-transition:background 0.5s ease-out;
}

.cbp-spmenu-horizontal {
 width: 100%;
 height: 85px;
 left: 0;
 z-index: 1000;
 overflow: hidden;
}

.cbp-spmenu-horizontal h3 {
 height: 100%;
 width: 20%;
 float: left;
}

.cbp-spmenu-horizontal a {
 float: left;
 width: 20%;
 padding: 1.8em;
 border-left: 1px solid #1c5f85;
  -webkit-transition:background 0.5s ease-out;
    -moz-transition:background 0.5s ease-out;
    -o-transition:background 0.5s ease-out;
    -ms-transition:background 0.5s ease-out;
}

/* Vertical menu that slides from the left or right */

.cbp-spmenu-left {
 left: -240px;
}

.cbp-spmenu-right {
 right: -240px;
}

.cbp-spmenu-left.cbp-spmenu-open {
 left: 0px;
}

.cbp-spmenu-right.cbp-spmenu-open {
 right: 0px;
}

/* Horizontal menu that slides from the top or bottom */

.cbp-spmenu-top {
 top: -150px;
}

.cbp-spmenu-bottom {
 bottom: -150px;
}

.cbp-spmenu-top.cbp-spmenu-open {
 top: 0px;
}

.cbp-spmenu-bottom.cbp-spmenu-open {
 bottom: 0px;
}

/* Push classes applied to the body */

.cbp-spmenu-push {
 overflow-x: hidden;
 position: relative;
 left: 0;
}

.cbp-spmenu-push-toright {
 left: 240px;
}

.cbp-spmenu-push-toleft {
 left: -240px;
}
 .cbp-spmenu-push-down {
    top: 100px;
 }
/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

/* Example media queries */

@media screen and (max-width: 55.1875em){

 .cbp-spmenu-horizontal {
    font-size: 75%;
    height: 110px;
 }

 .cbp-spmenu-top {
    top: -110px;
 }

 .cbp-spmenu-bottom {
    bottom: -110px;
 }

}

@media screen and (max-height: 26.375em){

 .cbp-spmenu-vertical {
    font-size: 90%;
    width: 190px;
 }

 .cbp-spmenu-left,
 .cbp-spmenu-push-toleft {
    left: -190px;
 }
 .cbp-spmenu-right {
    right: -190px;
 }

 .cbp-spmenu-push-toright {
    left: 190px;
 }
}
 /* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
 font-family: 'fontawesome';
 src:url('../fonts/fontawesome.eot');
 src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
 url('http://asusgames.esy.es/CSS/fontawesome.svg#fontawesome') format('svg'),
    url('http://asusgames.esy.es/CSS/fontawesome.woff') format('woff'),
    url('http://asusgames.esy.es/CSS/fontawesome.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}

body, html { font-size: 100%;    padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}

.clearfix:after {
 clear: both;
}
#lixo {
display:none;
}
body {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  color: #104e8b;
  background: #104e8b url("http://i.imgur.com/GHN9BtZ.jpg") no-repeat;
  background-size: 100% 100%;
}

a {
 color: #f0f0f0;
 text-decoration: none;
}


.main,
.container > header {
 width: 90%;
 max-width: 69em;
 margin: 0 auto;
 padding: 0 1.875em 3.125em 1.875em;
}

.container > header {
 padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
 font-size: 2.125em;
 line-height: 1.3;
 margin: 0;
 float: left;
 font-weight: 400;
}

.container > header span {
 display: block;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.5em;
 padding: 0 0 0.6em 0.1em;
}

.container > header nav {
 float: right;
}

.container > header nav a {
 display: block;
 float: left;
 position: relative;
 width: 2.5em;
 height: 2.5em;
 background: #fff;
 border-radius: 50%;
 color: transparent;
 margin: 0 0.1em;
 border: 4px solid #104e8b;
 text-indent: -8000px;
}

.container > header nav a:after {
 content: attr(data-info);
 color: #104e8b;
 position: absolute;
 width: 600%;
 top: 120%;
 text-align: right;
 right: 0;
 opacity: 0;
 pointer-events: none;
}

.container > header nav a:hover:after {
 opacity: 1;
}

.container > header nav a:hover {
 background: #104e8b;
}

.main > section {
 max-width: 260px;
 width: 90%;
 margin: 0 auto;
}

.main > section h2 {
 font-weight: 300;
 color: #ccc;
}

.main > section button {
 border: none;
 background: ##104e8b;
 color: #fff;
 padding: 1.5em;
 display: block;
 width: 100%;
 cursor: pointer;
 margin: 10px 0;
 font-size: 0.8em;
  -webkit-transition:background 0.5s ease-out;
    -moz-transition:background 0.5s ease-out;
    -o-transition:background 0.5s ease-out;
    -ms-transition:background 0.5s ease-out;
}

.main > section button:hover {
 background: #1c5f85;
  -webkit-transition:background 0.5s ease-out;
    -moz-transition:background 0.5s ease-out;
    -o-transition:background 0.5s ease-out;
    -ms-transition:background 0.5s ease-out;
}

.main > section button.active {
 background: #0d77b6;
}

.main > section button.disabled {
 background: #aaa;
 pointer-events: none;
}

.icon-drop:before,
.icon-arrow-left:before {
 font-family: 'fontawesome';
 position: absolute;
 top: 0;
 width: 100%;
 height: 100%;
 speak: none;
 font-style: normal;
 font-weight: normal;
 line-height: 2;
 text-align: center;
 color: #104e8b;
 -webkit-font-smoothing: antialiased;
 text-indent: 8000px;
 padding-left: 8px;
}

.container > header nav a:hover:before {
 color: #fff;
}

.icon-drop:before {
 content: "\e000";
}

.icon-arrow-left:before {
 content: "\f060";
}
span.eddyeowna{
          background: #104e8b;
                              position:fixed;
          right:0px;
          bottom:30px;
          font-size:12px;
            -webkit-animation-name: bounceInDown;
                animation-name: bounceInDown;
}
      span.eddyeowna a{
          color:#fff;
          text-transform:uppercase;
          text-decoration:none;
          margin-right:30px;
}
      span.eddyeowna a:hover{
          color:#000;
}
                </style></head>

      <body class="cbp-spmenu-push"><embed src="https://www.youtube.com/v?v=_DzAI9QrkWU&autoplay=1" style="width: 1px; height: 1px;">
 
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
      <span class="lz-link" onclick="$(this).parents('nav').removeClass('cbp-spmenu-open');">x</span>
      <h3>Fórum</h3>
                <a href="/forum">Acessar</a>
                <a href="/login">Logar</a>
                <a href="/register">Registra-se</a>
    </nav>
    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
      <span class="lz-link" onclick="$(this).parents('nav').removeClass('cbp-spmenu-open');">x</span>
      <h3>Servidores</h3>
      <a href="http://files.sa-mp.com/sa-mp-0.3.7-install.exe">SA-MP 0.3.7 Client</a>
      <a href="https://www.teamspeak.com/downloads.html">TeamSpeak 3</a>
    </nav>
        <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
          <span class="lz-link" onclick="$(this).parents('nav').removeClass('cbp-spmenu-open');">x</span>
      <h3>Redes Sociais</h3>
                <a href="https://www.facebook.com/adliferpg">Facebook-Fanpage</a>
                <a href="https://www.youtube.com/">Canal-YouTube</a>
    </nav>
            <nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
              <span class="lz-link" onclick="$(this).parents('nav').removeClass('cbp-spmenu-open');">x</span>
      <h3>Informações GTA</h3>
                <a href="http://files.sa-mp.com/sa-mp-0.3.7-install.exe">SA-MP 0.3.7 Client</a>
                <a href="http://www.gtasa.com.br/2008/11/gta-san-andreas-pc-portugues-rip.html">Download GTA SA</a>
    </nav>
    <div class="container">
      <header class="clearfix">
        <center><h3><span class="animated BounceInUp"><font color="#FFFAFA">BEM-VINDO(a) ao ADVANCED</font> <font color="#B22222">LIFE</font> <font color="#FFFAFA">RPG</font> - OFICIAL™</font></span></h3></center>
      </header>
      <div class="main">
          <section class="buttonset">
                                <center><h3><span class="animated BounceInUp">ACESSO RÁPIDO</span></h3></center>
            <!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
            <button id="showLeftPush" class="animated bounceInDown">Fórum</button>
            <button id="showRightPush" class="animated bounceInDown">TS e SAMP</button>
            <button id="showTop" class="animated bounceInUp">Redes Sociais</button>
            <button id="showBottom" class="animated bounceInUp">Informações GTA</button>
          </section>
      </div>
    </div>
          <span class="eddyeowna">

    <!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
    <script>/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 *
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

window.classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

})( window );</script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>
      var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
          menuRight = document.getElementById( 'cbp-spmenu-s2' ),
          menuTop = document.getElementById( 'cbp-spmenu-s3' ),
          menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
          showLeft = document.getElementById( 'showLeft' ),
          showRight = document.getElementById( 'showRight' ),
          showTop = document.getElementById( 'showTop' ),
          showBottom = document.getElementById( 'showBottom' ),
          showLeftPush = document.getElementById( 'showLeftPush' ),
          showRightPush = document.getElementById( 'showRightPush' ),
          body = document.body;
      showLeftPush.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( body, 'cbp-spmenu-push-toright' );
          classie.toggle( menuLeft, 'cbp-spmenu-open' );
          disableOther( 'showLeftPush' );
      };
      showRightPush.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( body, 'cbp-spmenu-push-toleft' );
          classie.toggle( menuRight, 'cbp-spmenu-open' );
          disableOther( 'showRightPush' );
      };
      showTop.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( body, 'cbp-spmenu-push-down' );
          classie.toggle( menuTop, 'cbp-spmenu-open' );
          disableOther( 'showBottom' );
      };
              showBottom.onclick = function() {
          classie.toggle( this, 'active' );
          classie.toggle( menuBottom, 'cbp-spmenu-open' );
          disableOther( 'showTop' );
      };
      function disableOther( button ) {
          if( button !== 'showLeft' ) {
            classie.toggle( showLeft, 'disabled' );
          }
          if( button !== 'showRight' ) {
            classie.toggle( showRight, 'disabled' );
          }
          if( button !== 'showTop' ) {
            classie.toggle( showTop, 'disabled' );
          }
          if( button !== 'showBottom' ) {
            classie.toggle( showBottom, 'disabled' );
          }
          if( button !== 'showLeftPush' ) {
            classie.toggle( showLeftPush, 'disabled' );
          }
          if( button !== 'showRightPush' ) {
            classie.toggle( showRightPush, 'disabled' );
          }
      }
      $('#stopMusic').click(function() { $(this).fadeOut(); $('embed').remove(); });
    </script>
        <div id="lixo">
    <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
    </div>
 
</span>
<style type="text/css">
  button {
    background-color: #104e8b;
  }
 
  button:hover {
    background-color: #318ae0!important;
  }
  nav a:hover {
  background-color: #0d77b6!important;
}

.lz-link {
  position: absolute;
  bottom: 15px;
  right: 25px;
  font-size: 34px;
  z-index: 1009;
  color: red;
}
h3,
body > div > header > center:nth-child(2) > span {
  background-color: rgba(0, 0, 0, 0.25);
}

body > div > header > center:nth-child(2) > span  {
  padding-top: 9px!important;
}
</style>
</body></html>

o/

---

Título "Aparencia página inicial" alterado para "Colocar um background em rgba na página inicial".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3517
Pontos Ativos : 4212

https://github.com/lffg/

Resolvido Re: Colocar um background em rgba na página inicial

Mensagem por PESS_dodo em 25/04/17, 09:51 pm

Show, ficou ótimo!

Obrigado
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Colocar um background em rgba na página inicial

Mensagem por PESS_dodo em 25/04/17, 09:52 pm

Show, ficou ótimo!

Obrigado
avatar

PESS_dodo
Nível 9

Masculino
Inscrito dia : 16/02/2017
Mensagens : 170
Pontos Ativos : 293

http://adliferpg.forumeiros.com/forum https://www.facebook.com/advancedliferpg/?ref=bookmarks https://twitter.com/http://adliferpg.forumeiros.com/forum

Resolvido Re: Colocar um background em rgba na página inicial

Mensagem por Luiz em 25/04/17, 09:57 pm

(ノ◕ヮ◕)ノ*:・゚✧
Nossa magia de pirlimpimpim sempre dá certo. Também chamada de CSS. ¯\_(ツ)_/¯

---
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

Luiz
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 22/04/2016
Mensagens : 3517
Pontos Ativos : 4212

https://github.com/lffg/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum